javascript - 单选按钮列表列表 - 只允许选择一个

Question

我在 fieldset 标记中有多个单选按钮列表。

我只希望可以从整个列表中选择一项...目前我可以从每个单选按钮列表中选择一项 - 这是正常的

我知道这样做的正确方法是拥有一个长单选按钮列表，但这不是一种选择。

javascript/jquery 中有没有给定字段集类名的方法 - 比如说

<fieldset class="mylistofradiolists">当其中的单选按钮被选中时，所有其他项目都被取消选择，只有那个单选按钮保持选中状态

谢谢

Answer 1

您可以使用以下代码执行此操作

$radios =  $('.mylistofradiolists :radio');
$radios.on('change',function(){
   $radios.not(this).prop('checked',false);
});

当一个收音机被选中时，除了在该容器中被取消选择的所有其他收音机。

最好用

$radios =  $('.mylistofradiolists [type=radio]');

代替

$radios =  $('.mylistofradiolists :radio');

正如选择器的文档:radio所说

因为 :radio 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :radio 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。

为了在现代浏览器中获得更好的性能，请改用 [type="radio"] 。

Answer 2

通过保持单选按钮的每个“名称”属性相同，您可以实现从由字段集标记分隔的单选按钮列表中仅选择一个单选按钮的功能。

例如： - 对于第一个字段集 - 保持单选按钮名称字段相同。

<fieldset >
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<fieldset >

对于第二个字段集，保持名称属性相同：-

<fieldset >
<input type="radio" name="food" /> : Indian<br />
<input type="radio" name="food" /> : UK<br />
<fieldset >

希望这个分析器用户问题:)