根据选定的单选按钮显示多个字段集之一

Question

我创建了a form to process user input using 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，则显示所有三个字段集。

任何帮助将不胜感激^^

Answer 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 Fiddle demo.

顺便说一句，与其对radio 输入的id 执行字符串操作，不如或者使用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 Fiddle demo.

---

编辑后一个代码块以满足 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 Fiddle demo.

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

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

Answer 2

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

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);"