按 Class 检查单选按钮

Question

$(".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>

我有两组单选按钮，我希望默认勾选 class "test"。

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

Answer 1

根据 definition，单选按钮是一组 <input> 元素，它们共享相同的 name，其中一个是 selected 他们给包含的 <form> 命名空间由他们共同的 name 定义 selected 的值，并自动 deselect 具有相同 [=] 的任何其他单选按钮11=].

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

如果您的方案需要使用户能够 select 多个，

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

总结一下：无论你做什么，没有一个像样的浏览器会允许你 select 多个 <input type="radio"> 具有相同的 name 在相同的 [=12] =] 元素。通过任何方法。而且，即使理论上可行，尝试获取该名称空间的值也会失败。

单选按钮就像汉兰达人："There can be only one".

Answer 2

您应该以不同的方式命名这两个集合，因为如果它们都被命名为 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>

按 Class 检查单选按钮

Check Radio Buttons by Class

jquery

radio-button

radio

checked