jQuery复选框联动问题：顶层与子复选框互斥逻辑异常

问题分析 #

你之前的代码错误在于：只要任意复选框触发change事件，就会取消其他所有复选框的选中状态，这直接导致了只能选一个复选框的问题。正确逻辑应该是：

• 顶层复选框选中 → 所有子复选框取消选中（你已实现，这里补充完整兼容逻辑）
• 任意子复选框选中 → 仅取消顶层复选框的选中状态，子复选框之间可以正常多选

实现步骤&代码 #

1. 明确DOM结构（示例，可根据实际调整选择器）

假设你的HTML结构如下，给顶层复选框加唯一ID，子复选框统一加类名：

<div id="langcheck">
  <input type="checkbox" id="top-lang-checkbox" />
  <label for="top-lang-checkbox">Sichtbar in allen Sprachen</label>
  <!-- 动态生成的子复选框容器 -->
  <div class="child-lang-group">
    <!-- 动态生成的子复选框，统一带child-lang类 -->
    <input type="checkbox" class="child-lang" />
    <label>德语</label>
    <!-- 更多动态生成的子复选框 -->
  </div>
</div>

2. jQuery代码实现

// 处理顶层复选框：选中时取消所有子复选框
$('#top-lang-checkbox').on('change', function() {
  if ($(this).is(':checked')) {
    // 把所有子复选框设为未选中
    $('.child-lang').prop('checked', false);
  }
});

// 处理动态生成的子复选框：用事件委托监听change事件
$('#langcheck').on('change', '.child-lang', function() {
  // 当当前子复选框被选中，且顶层复选框处于选中状态时，取消顶层的选中
  if ($(this).is(':checked') && $('#top-lang-checkbox').is(':checked')) {
    $('#top-lang-checkbox').prop('checked', false);
  }
});

关键说明 #

• 事件委托：因为子复选框是动态生成的，直接给.child-lang绑定change事件只会对已存在的元素生效，用父容器#langcheck的on方法委托事件，才能覆盖后续生成的子复选框。
• 逻辑拆分：把顶层和子复选框的逻辑分开处理，避免互相干扰，确保子复选框之间可以正常多选，只有选中子的时候才影响顶层。

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