父复选框选中联动子复选框及点击Div选中对应子复选框需求

HTML 结构 #

首先构建对应的页面结构，模拟3个包含子复选框的区块：

<div class="checkbox-group">
  <h3><input type="checkbox" class="parent-checkbox" data-group="group1"> 区块1</h3>
  <div class="child-checkboxes">
    <input type="checkbox" name="group1-item" value="1"> 子项1-1
    <input type="checkbox" name="group1-item" value="2"> 子项1-2
    <input type="checkbox" name="group1-item" value="3"> 子项1-3
  </div>
</div>

<div class="checkbox-group">
  <h3><input type="checkbox" class="parent-checkbox" data-group="group2"> 区块2</h3>
  <div class="child-checkboxes">
    <input type="checkbox" name="group2-item" value="1"> 子项2-1
    <input type="checkbox" name="group2-item" value="2"> 子项2-2
  </div>
</div>

<div class="checkbox-group">
  <h3><input type="checkbox" class="parent-checkbox" data-group="group3"> 区块3</h3>
  <div class="child-checkboxes">
    <input type="checkbox" name="group3-item" value="1"> 子项3-1
    <input type="checkbox" name="group3-item" value="2"> 子项3-2
    <input type="checkbox" name="group3-item" value="3"> 子项3-3
    <input type="checkbox" name="group3-item" value="4"> 子项3-4
  </div>
</div>

JavaScript 逻辑 #

通过原生JS实现需求功能：

// 需求1：父复选框选中时，选中对应区块下所有子复选框
document.querySelectorAll('.parent-checkbox').forEach(parent => {
  parent.addEventListener('change', function() {
    // 获取当前父复选框所在的区块
    const group = this.closest('.checkbox-group');
    // 选中/取消该区块下所有子复选框
    group.querySelectorAll('.child-checkboxes input[type="checkbox"]').forEach(child => {
      child.checked = this.checked;
    });
  });
});

// 需求2：点击第一个div时，仅选中该div下的子复选框，其余区块保持原状
document.querySelector('.checkbox-group:first-child').addEventListener('click', function(e) {
  // 避免点击父复选框时重复触发
  if (e.target.classList.contains('parent-checkbox')) return;
  
  this.querySelectorAll('.child-checkboxes input[type="checkbox"]').forEach(child => {
    child.checked = true;
  });
});

功能说明 #

• 需求1实现：给每个父复选框绑定change事件，状态变化时通过closest定位所属区块，统一切换该区块内所有子复选框的选中状态。
• 需求2实现：给第一个区块绑定click事件，点击时直接选中其下所有子复选框；同时判断点击目标不是父复选框，避免和需求1的逻辑冲突，确保其他区块状态不受影响。

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