勾选当前组子复选框时自动取消其他组子复选框的实现方案

需求说明 #

已搭建父子复选框结构：勾选父复选框时显示对应子复选框并支持多选。需新增功能：勾选当前组子复选框时，自动取消其他所有组的子复选框选中状态，确保同一时间仅能选中某一组的子复选框值。

完整代码实现 #

HTML（修正原代码多余闭合标签）

<ul class="acf-checkbox-list acf-bl">
  <li data-id="354">
    <label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="354"> <span>topic 1</span></label>
    <ul class="children acf-bl" style="display: block;">
      <li data-id="377"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="377"> <span>subtopic a </span></label></li>
      <li data-id="361"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="361"> <span>subtopic  b</span></label></li>
      <li data-id="366"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="366"> <span>subtopic  c</span></label></li>
    </ul>
  </li>
  <li data-id="372">
    <label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="372"> <span>topic 2</span></label>
    <ul class="children acf-bl">
      <li data-id="389"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="389"> <span>subtopic x</span></label></li>
      <li data-id="399"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="399"> <span>subtopic  y</span></label></li>
    </ul>
  </li>
  <li data-id="373">
    <label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="373"> <span>Topic 3</span></label>
    <ul class="children acf-bl">
      <li data-id="410"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="410"> <span>subtopic 1</span></label></li>
      <li data-id="412"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="412"> <span>subtopic 2 </span></label></li>
      <li data-id="409"><label><input type="checkbox" name="acf[field_63fb5f54847a5][]" value="409"> <span>subtopic 3</span></label></li>
    </ul>
  </li>
</ul>

CSS

.children {
  display: none;
}

JavaScript（新增互斥逻辑）

// 父复选框显示/隐藏子列表逻辑
const parentCheckboxes = document.querySelectorAll('.acf-checkbox-list > li > label > input');
parentCheckboxes.forEach(checkitem => {
  const value = checkitem.value;
  checkitem.addEventListener('click', (event) => {
    const parentLi = document.querySelector(`[data-id="${value}"]`);
    const childList = parentLi.querySelector('.children');
    childList.style.display = checkitem.checked ? "block" : "none";
  });
});

// 子复选框互斥选中逻辑
const allChildCheckboxes = document.querySelectorAll('.children input[type="checkbox"]');
allChildCheckboxes.forEach(childCheckbox => {
  childCheckbox.addEventListener('change', (e) => {
    // 仅当当前子复选框被勾选时，触发互斥取消操作
    if (e.target.checked) {
      // 获取当前子复选框所属的父组容器
      const currentParentGroup = e.target.closest('.children');
      // 遍历所有子复选框，取消非当前组的选中状态
      allChildCheckboxes.forEach(cb => {
        if (!currentParentGroup.contains(cb)) {
          cb.checked = false;
        }
      });
    }
  });
});

关键逻辑说明 #

1. 父复选框逻辑：保留原有显示/隐藏子列表功能，用模板字符串优化选择器写法，提升代码可读性。
2. 子复选框互斥逻辑：
   • 给所有子复选框绑定change事件（比click更适配复选框状态变化场景）
   • 当某子复选框被勾选时，定位其所属的父组容器
   • 遍历所有子复选框，将不属于当前组的复选框全部取消选中
   • 若当前子复选框是被取消勾选，则不触发互斥操作，允许同一组内自由取消单个子项

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