1

我制作了一个表单来使用 PHP 处理用户输入，第一个问题要求用户选择三个单选按钮之一来填写“类型”参数 - 可用选项是“书”、“期刊”和“网站”，代码如下所示：

<strong>Type of work:</strong>
<input type="radio" name="type" id="book" value="book" checked="checked" /> <label for="book">Book</label>
<input type="radio" name="type" id="journal" value="journal" /> <label for="journal">Journal</label>
<input type="radio" name="type" id="website" value="website" /> <label for="website">Website</label>

在页面的下方，我有三个字段集（使用<fieldset>），每个字段集对应于一种类型。我希望一次只显示其中一个，具体取决于选择了哪个单选按钮，以使页面看起来更干净。

不幸的是，我是一个 JavaScript 菜鸟，我最后一次尝试把事情搞砸了。这些字段集已经有 ID（boxBook、boxJournal和boxWebsite），尽管它们目前没有做任何特别的事情。

如果它影响任何东西，我希望输出是有效的 HTML5，并优雅地降级，如果用户禁用了 JS，则显示所有三个字段集。

任何帮助将不胜感激^^

4

2 回答 2

1

使用 jQuery 我建议：

// hides the elements using jQuery (so they're visible without JavaScript)
$('#boxBook, #boxJournal, #boxWebsite').hide();

// when the radio inputs whose name is equal to "type" is changed:
$('input:radio[name="type"]').change(function() {
    var id = this.id;

    // hides all the fieldset elements whose `id` starts with "box":
    $('fieldset[id^="box"]').hide();

    // looks for the element with the id equal to
    // `box` + upper-cased first-letter of this.id +
    // the substring from second-letter onwards of this.id
    $('#box' + id[0].toUpperCase() + id.substring(1)).show();
});​

JS 小提琴演示。

id顺便说一句，与其对输入执行字符串操作，不如使用属性来指定目标元素的精确度会radio更容易：data-*id

<input type="radio" id="book" name="type" data-targets="boxBook" />

并使用：

$('#boxBook, #boxJournal, #boxWebsite').hide();

$('input:radio[name="type"]').change(function() {
    var id = $(this).attr('data-targets'); // or: $(this).data('targets');
    $('fieldset[id^="box"]').hide();
    $('#' + id).show();
});​

JS 小提琴演示。

编辑后一个代码块以满足 OP 的要求：

$('input:radio[name="type"]').change(function() {
    $(this).siblings('input:radio[name="type"]').each(function() {
        $('#' + $(this).data('targets')).hide();
    });
    $('#' + $(this).data('targets')).show();
}).filter(function() {
    return !this.checked;
}).each(function() {
    $('#' + $(this).data('targets')).hide();
});​

JS 小提琴演示。

不过，坦率地说，我认为我把它复杂化了很多。但它确实有效，并且满足了评论中指定的需求：

如果默认选中其中一个单选按钮，则不会显示字段集。如果可能的话，我想让它默认预订

于 2012-12-03T18:31:37.940 回答
0

您应该在头部的脚本元素中使用一个函数，大致如下

function chooseFieldset(id) {
  document.getElementById('boxBook'   ).style.display =
      (id == 'book')   ?'display':'none';
  document.getElementById('boxJournal').style.display =
      (id == 'journal')?'display':'none';
  document.getElementById('boxWebsite').style.display =
      (id == 'website')?'display':'none';
}

然后，您可以在每次单击单选按钮时调用 id ，使用每个单选上的属性：

onClick="chooseFieldset(this.id);"
于 2012-12-03T18:32:44.080 回答