Question

我做了a form to process user input using PHP，第一个问题要求用户选择三个单选按钮中的一个来填写“type”参数 - 可用选项是“book”，“journal”和“网站“，代码如下：

<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

顺便说一句，不是在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 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);"

根据所选的单选按钮显示多个字段集中的一个

2 个答案: