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

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 .

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

if one of the radio buttons is checked by default, the fieldset doesn't display. I'd like to have it default to book if possible