200+ Radio Button批量选中功能失效问题求助（原Checkbox可实现）

首先得明确一个核心点：Radio按钮的原生特性是同一name属性的组内只能有一个被选中，这和Checkbox允许多选的逻辑完全不同，所以直接照搬Checkbox的全选代码肯定会失效——你设置所有Radio为checked后，浏览器会自动只保留最后一个被设置的Radio处于选中状态，其他都会被取消。

接下来根据你的需求，给你两种可行的解决方案：

方案1：如果你的Radio不需要互斥（不推荐，违背Radio设计初衷） #

如果你的场景其实不需要Radio的互斥功能，只是误把Checkbox换成了Radio，那可以给每个Radio设置不同的name属性，这样它们就变成了独立的控件，不再互斥。之后就可以用你之前的Checkbox全选逻辑来批量设置选中状态：

// 假设你有一个触发全选的控件（比如特定Radio或按钮）
$('#selectAllTrigger').click(function() {
  // 批量设置所有radio为选中状态
  $('input[type="radio"]').prop('checked', true);
});

但还是要提醒：这种用法不符合Radio按钮的设计规范，用户体验会很奇怪，如果你需要多选功能，其实更适合用回Checkbox。

方案2：如果需要保留Radio的互斥特性（推荐） #

如果你的Radio是按分组设计的（比如多个独立分组，每组选一个选项），那“全选”的逻辑应该是让每个分组都选中指定的选项。比如每个分组里都有一个统一的目标选项，点击全选时让所有分组都选中这个选项。

举个例子，假设你的HTML结构是多个Radio组，每组name不同，且每组都有一个值为targetOption的选项：

<!-- 分组1 -->
<input type="radio" name="group1" value="targetOption"> 统一选项
<input type="radio" name="group1" value="other"> 其他选项

<!-- 分组2 -->
<input type="radio" name="group2" value="targetOption"> 统一选项
<input type="radio" name="group2" value="other"> 其他选项

<!-- 全选触发按钮 -->
<button id="selectAllBtn">全选所有组的统一选项</button>

对应的jQuery实现代码：

$('#selectAllBtn').click(function() {
  // 选中所有分组里值为targetOption的Radio
  $('input[type="radio"][value="targetOption"]').prop('checked', true);
});

如果你的“全选”是指选中每个分组的第一个选项，也可以这样写：

$('#selectAllBtn').click(function() {
  // 遍历每个Radio分组，选中每组的第一个选项
  $('input[type="radio"]').each(function() {
    var groupName = $(this).attr('name');
    // 避免重复操作同一分组
    if (!$('input[name="' + groupName + '"]:checked').length) {
      $('input[name="' + groupName + '"]:first').prop('checked', true);
    }
  });
});

补充：为什么Checkbox的代码能生效？ #

因为Checkbox没有互斥限制，设置checked=true后，所有Checkbox都会保持选中状态；而Radio的互斥特性是浏览器原生行为，即使你用JS强制设置多个为checked，浏览器也会自动纠正，只保留最后一个的选中状态。

内容的提问来源于stack exchange，提问作者سلطان