按类检查单选按钮

Posted 2023-03-27

【中文标题】按类检查单选按钮

【英文标题】：Check Radio Buttons by Class

【发布时间】：2019-01-15 20:32:54

【问题描述】：

$(".test").each(function(i) 
  this.checked = true;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="1" name="radio" class="test" id="tr1" />
<input type="radio" value="1" name="radio" class="radio" id="tr2" />


<input type="radio" value="1" name="radio" class="radio2" id="tr3" />
<input type="radio" value="1" name="radio" class="test" id="tr4" />
<button class="button">Click</button>

我有两组单选按钮，我希望默认勾选“测试”类。

我将如何使用单选按钮执行此操作，因为我们现在只能勾选一个单选按钮

【问题讨论】：

它们都具有相同的名称。在任何给定时间只能选择其中一个，因为它们是收音机。

另外作为一个小旁注，您的逻辑不需要 each 。你可以做$('.test').prop('checked', true)

@YouneL 你的评论是什么意思？

@YouneL 不，他们不能。如果它们都共享相同的名称，则不会。 jsfiddle.net/ajpsxb17你错过了这个问题的症结所在。

我看不出你在哪里注意到了这一点。我所看到的只是为什么不只使用检查属性

【参考方案1】：

您应该以不同的方式命名这两个集合，因为如果它们都被命名为radio，一次只能检查其中一个。只需在下面的示例中将第二组重命名为 radio2 之类的其他名称，然后这些组将彼此独立工作。

$(".test").each(function(i) 
  this.checked = true;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="1" name="radio" class="test" id="tr1" />
<input type="radio" value="1" name="radio" class="radio" id="tr2" />


<input type="radio" value="1" name="radio2" class="radio2" id="tr3" />
<input type="radio" value="1" name="radio2" class="test" id="tr4" />
<button class="button">Click</button>

【参考方案2】：

通过definition，单选按钮是一组<input> 元素，它们共享相同的name，具有开箱即用的行为，当其中一个被选中时，它们会定义包含<form> 的命名空间通过它们共同的name 选定的值并自动取消选择具有相同name 的任何其他单选按钮。

它是专门为这个用例设计的（用户可以从多个选项中选择一个）。

如果您的场景需要让用户选择多个，要么

使用不同的name 属性， 使用<input type="checkbox">s 使用<select> 元素和multiple="true"

---

总结一下：不管你做什么，没有一个像样的浏览器会允许你在同一个<form>元素中选择多个<input type="radio">和同一个name。用任何方法。而且，即使理论上可行，尝试获取该命名空间的值也会失败。

单选按钮就像高地人：“只能有一个”。