单选按钮（Radio Buttons）全选功能失效问题求助

嘿，我来帮你搞定这个单选按钮全选失效的问题～

核心原因：单选按钮的原生特性限制 #

你代码里所有class="first"的单选按钮都共用了同一个name="A"，而HTML里同一name的单选按钮属于互斥组——同一时间只能有一个被选中。所以你调用$('.first').prop('checked', true)试图把它们都设为选中状态时，浏览器会直接忽略这个操作（或者只会保留最后一个被设置的选项），这就是“全选”功能无效的根本原因。

另外还要提一句：你的HTML里有多余的</td>标签，建议先修正结构，避免出现语法错误影响功能。

两种修复方案（根据你的需求选择） #

方案1：需要多选功能（允许同时选多个选项） #

如果你的需求是可以同时选中多个“1”或“2”，那应该把单选按钮改成复选框（type="checkbox"），同时调整全选逻辑，让它能跟随全选框的状态切换：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 把单选改成复选框，修正多余的</td> -->
<input type="checkbox" name="A" class="first" />1
<input type="checkbox" name="A" class="first" />2
<input type="checkbox" name="A" class="first" />1
<input type="checkbox" name="A" class="first" />2
<!-- 全选按钮也改成复选框 -->
<input type="checkbox" class="allFirst" onclick="checkAll($(this));" />Select All #1

<script>
function checkAll(e) {
  // 根据全选框的状态，同步设置所有first选项的选中状态
  if (e.hasClass('allFirst')) 
    $('.first').prop('checked', e.is(':checked'));
  else 
    $('.second').prop('checked', e.is(':checked'));
}
</script>

方案2：多个独立单选组（每行一个组，统一选中某类选项） #

如果你的需求是保留单选逻辑（每个组只能选一个），但要把所有组里的“1”都选中，那得先给每个单选组设置独立的name，再调整全选逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 给每个独立的单选组设置不同name，添加类标记选项类型 -->
<td><input type="radio" name="group1" class="first option-1" />1</td>
<td><input type="radio" name="group1" class="first option-2" />2</td>
<td><input type="radio" name="group2" class="first option-1" />1</td>
<td><input type="radio" name="group2" class="first option-2" />2</td>
<input type="checkbox" class="allFirst" onclick="checkAll($(this));" />Select All #1

<script>
function checkAll(e) {
  if (e.hasClass('allFirst')) {
    // 同步所有组里的"1"选项的选中状态
    $('.first.option-1').prop('checked', e.is(':checked'));
  }
}
</script>

这样每个group1、group2是独立的单选组，全选按钮可以一键把所有组的“1”选项选中，完全符合单选按钮的规则。

内容的提问来源于stack exchange，提问作者Tina Sharma