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

我已经做了，第一个问题要求用户选择三个单选按钮中的一个来填写“type”参数-可用选项是“book”、“journal”和“website”，代码如下所示：

<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>

工作类型：
书
杂志
网站

再往下看，我有三个字段集（使用

），每个字段集对应一种类型。我希望一次只显示其中一个，这取决于选择了哪个单选按钮，以使页面看起来更干净

不幸的是，我是一个完全不懂JavaScript的人，我最后一次尝试把事情搞砸了。字段集已经有ID（

boxBook

、

boxJournal

和

boxWebsite

），尽管它们目前没有任何特殊功能

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

---

非常感谢使用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();
});​

顺便说一句，与其对

无线电

输入的

id

执行字符串操作，不如使用

data-*

属性来指定目标元素的精确

id

：

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

---

编辑后一个代码块以满足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();
});​

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

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

---

使用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();
});​

顺便说一句，与其对

无线电

输入的

id

执行字符串操作，不如使用

data-*

属性来指定目标元素的精确

id

：

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

---

编辑后一个代码块以满足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();
});​

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

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

---

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

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

---

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

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

---

最好更改单选按钮的值，使其与ID完全对应。如果没有其他内容，它会使代码更具可读性。@Blazemonger:agreed；正如您所评论的，我在中编辑了它，尽管我使用了

data-*

属性，因为

value

可以完全用于另一个目的=）是的，

value

由处理输入的PHP使用。无论如何，我已经尝试了该代码，它隐藏了字段集，但它似乎不再显示它们了。编辑了原始代码（并发布了一个）以显示它的工作状态。我确实编辑了代码，因为我在字符串操作部分犯了一个错误，导致了一个错误=/太好了，那很好用！除了一件小事——如果默认选中其中一个单选按钮，则不会显示字段集。如果可能的话，我想让它默认为book，但这不是什么大问题。谢谢你的帮助！（我会投票给你，但我还不能）最好更改单选按钮的值，使其与ID完全对应。如果没有其他内容，它会使代码更具可读性。@Blazemonger:agreed；正如您所评论的，我在中编辑了它，尽管我使用了

data-*

属性，因为

value

可以完全用于另一个目的=）是的，

value

由处理输入的PHP使用。无论如何，我已经尝试了该代码，它隐藏了字段集，但它似乎不再显示它们了。编辑了原始代码（并发布了一个）以显示它的工作状态。我确实编辑了代码，因为我在字符串操作部分犯了一个错误，导致了一个错误=/太好了，那很好用！除了一件小事——如果默认选中其中一个单选按钮，则不会显示字段集。如果可能的话，我想让它默认为book，但这不是什么大问题。谢谢你的帮助！（我想投你一票，但我还不能）我的答案是没有外部库，但我没有注意到问题被标记为jQuery。哦，你更喜欢什么？我不介意。我这样标记它是因为我安装了JQuery，所以如果这是最好的方法，我可以使用它。我的答案是没有外部库，但我没有注意到问题被标记为JQuery。哦，你更喜欢什么？我不介意。我这样标记它是因为我安装了JQuery，所以如果这是最好的方法，我可以使用它。