使用原生JS实现点击指定复选框批量取消其他不同name属性复选框选中状态

核心解决思路 #

你原有代码的问题是依赖name属性筛选受控复选框，只要把筛选逻辑替换为不依赖name的实现即可，全程不需要修改原有复选框的name属性，且所有实现均为原生JS，符合你的要求。

方案一：添加统一类名筛选（推荐） #

该方案灵活性最高，不会误选页面其他位置的无关复选框，仅需要给受控复选框新增一个自定义类名即可，原有name属性完全保留。

代码实现 #

HTML部分：

<!-- 给所有需要被控制的复选框加统一类名，name属性无需任何修改 -->
<input type="checkbox" name="email" class="controlled-checkbox">
<input type="checkbox" name="phone" class="controlled-checkbox">
<input type="checkbox" name="sms" class="controlled-checkbox">
<input type="checkbox" name="whatsapp" class="controlled-checkbox">
<!-- 控制用复选框 -->
<input type="checkbox" onclick="togglecheckboxes('controlled-checkbox')" value="Toggle all">

JS部分：

var isAllCheck = false;
function togglecheckboxes(className) {
  // 按类名筛选所有受控复选框
  var cbarray = document.querySelectorAll('.' + className);
  for(var i = 0; i < cbarray.length; i++){
    cbarray[i].checked = !isAllCheck;
  }
  isAllCheck = !isAllCheck;
}

方案二：按结构位置筛选（无需修改原有复选框属性） #

如果你不想改动原有复选框的任何属性，可以直接按DOM结构筛选，排除控制用复选框后修改其他所有复选框的状态，完全不需要触碰原有name配置。

代码实现 #

HTML部分（原有复选框完全不用改）：

<input type="checkbox" name="email">
<input type="checkbox" name="phone">
<input type="checkbox" name="sms">
<input type="checkbox" name="whatsapp">
<!-- 控制用复选框直接传入自身元素，省去全局变量存储状态 -->
<input type="checkbox" onclick="togglecheckboxes(this)" value="Toggle all">

JS部分：

function togglecheckboxes(controlCheckbox) {
  // 获取页面所有复选框
  var allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
  // 遍历排除最后一个控制用复选框，同步其他复选框的选中状态
  for(var i = 0; i < allCheckboxes.length - 1; i++){
    allCheckboxes[i].checked = controlCheckbox.checked;
  }
}

该方案适用于受控复选框都位于控制框之前、且当前区域没有其他无关复选框的场景。

如果你的需求仅需要点击控制框时取消所有其他复选框的选中状态，不需要全选功能，直接将代码中设置checked的逻辑固定为false即可。

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