如何用JavaScript实现多组按类名切换复选框全选/取消全选

问题背景 #

不太熟悉JavaScript，需要实现通过一个复选框切换同组内多个复选框选中状态的功能。已有单组可用的代码，但改造为支持多组的通用函数时多次失败。目前有一个按name属性实现的可用函数，但担心会与其他PHP方法冲突，寻求帮助。

单组可用代码及对应HTML #

JavaScript代码 #

var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
  var checked = this.checked;
  var otherCheckboxes = document.querySelectorAll(".toggleable");
  [].forEach.call(otherCheckboxes, function(item) {
    item.checked = checked;
  });
});

对应HTML #

<body>
  <label for="id_check_uncheck_all">Select All</label>
  <input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
  <br/>
  <input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
  <input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
  <input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</body>

改造失败的通用函数及对应HTML #

尝试的JavaScript函数 #

function checkAllBox(ref, classname) {
  var checkAll = document.getElementById(ref);
  checkAll.addEventListener("change", function() {
    var checked = this.checked;
    var otherCheckboxes = document.querySelectorAll(classname);
    [].forEach.call(otherCheckboxes, function(item) {
      item.checked = checked;
    });
  });
};

对应HTML #

<body>
  <label for="id_check_uncheck_all">Select All</label>
  <input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all" onclick="checkAllBox('id_check_uncheck_all','toggleable')">
  <br/>
  <input type="checkbox" name="checkBox1" value="checked1" class="toggleable">
  <input type="checkbox" name="checkBox2" value="checked2" class="toggleable">
  <input type="checkbox" name="checkBox3" value="checked3" class="toggleable">
</body>

现有按name属性实现的可用函数 #

<script type="text/javascript">
    function checkAllBox(ref, name) {
      var form = ref;

      while (form.parentNode && form.nodeName.toLowerCase() != 'form') { form = form.parentNode; }

      var elements = form.getElementsByTagName('input');

      for (var i = 0; i < elements.length; i++) {
        if (elements[i].type == 'checkbox' && elements[i].name == name) {
          elements[i].checked = ref.checked;
        }
      }
    }
</script>

解决方案（避免name冲突的多组实现） #

可以通过分组容器+自定义属性的方式实现，既支持多组，又不会和name属性冲突：

实现思路 #

1. 每组复选框放在独立的容器（如div）中
2. 全选框添加自定义属性data-group-target，值为同组目标复选框的类选择器
3. 通用函数监听全选框的change事件，仅操作当前组容器内的目标复选框

完整代码示例 #

HTML

<body>
  <!-- 第一组 -->
  <div class="checkbox-group">
    <label for="check-all-group1">全选组1</label>
    <input type="checkbox" id="check-all-group1" data-group-target=".group1-checkbox">
    <br>
    <input type="checkbox" class="group1-checkbox" value="item1">选项1
    <input type="checkbox" class="group1-checkbox" value="item2">选项2
    <input type="checkbox" class="group1-checkbox" value="item3">选项3
  </div>

  <!-- 第二组 -->
  <div class="checkbox-group">
    <label for="check-all-group2">全选组2</label>
    <input type="checkbox" id="check-all-group2" data-group-target=".group2-checkbox">
    <br>
    <input type="checkbox" class="group2-checkbox" value="itemA">选项A
    <input type="checkbox" class="group2-checkbox" value="itemB">选项B
    <input type="checkbox" class="group2-checkbox" value="itemC">选项C
  </div>
</body>

JavaScript

// 通用全选初始化函数
function initCheckAll() {
  // 获取所有带分组目标的全选框
  const checkAllBoxes = document.querySelectorAll('[data-group-target]');
  
  checkAllBoxes.forEach(box => {
    box.addEventListener('change', function() {
      const targetSelector = this.getAttribute('data-group-target');
      // 仅在当前组容器内查找目标复选框
      const targetBoxes = this.closest('.checkbox-group').querySelectorAll(targetSelector);
      
      targetBoxes.forEach(target => {
        target.checked = this.checked;
      });
    });
  });
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', initCheckAll);

方案优势 #

• 不依赖name属性，彻底避免与PHP后端逻辑冲突
• 天然支持多组，各组操作完全独立
• 通过自定义属性和容器限定，逻辑清晰，后续新增分组仅需复制结构即可

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