求助：实现子复选框全选时自动勾选对应父复选框的jQuery代码优化

没问题，我来帮你完善这个复选框的双向联动逻辑！你现在的代码已经实现了父选框控制子选框的功能，只需要补充子选框全选时自动勾选父选框的判断逻辑就可以了。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk-all-con">
  <input type="checkbox" id="chkall1" class="chk-all-s" check-all-for="approve" />
  <label class="lbl-chkall" for="chkall1">Parent Checkbox 1</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall2" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall2">Sibling Checkbox</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall3" type="checkbox" name="approve" class="chkAll">
  <label class="lbl-chkall" for="chkall3">Sibling Checkbox</label>
</div>
<br>
<br>
<div class="chk-all-con">
  <input type="checkbox" id="chkall4" class="chk-all-s" check-all-for="disapprove" />
  <label class="lbl-chkall" for="chkall4">Parent Checkbox 2</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall5" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall5">Sibling Checkbox</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall6" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall6">Sibling Checkbox</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall7" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall7">Sibling Checkbox</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall8" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall8">Sibling Checkbox</label>
</div>
<div class="chk-all-con chk-all-without-text">
  <input id="chkall9" type="checkbox" name="disapprove" class="chkAll">
  <label class="lbl-chkall" for="chkall9">Sibling Checkbox</label>
</div>

<script>
$(document).ready(function(){
  // 父选框控制子选框的逻辑
  $('input[type=checkbox][class=chk-all-s]').click(function() {
    var cb = $(this), name = cb.attr('check-all-for');
    if(name == null) return false;
    $('input[type=checkbox][name^='+name+']').prop('checked', cb.prop('checked'));
  });

  // 子选框点击时，检查是否全部勾选，更新父选框状态
  $('input[type=checkbox].chkAll').click(function() {
    var childCb = $(this);
    var groupName = childCb.attr('name');
    // 找到对应的父选框
    var parentCb = $('input[type=checkbox].chk-all-s[check-all-for='+groupName+']');
    if(!parentCb.length) return;

    // 统计当前组的子选框总数和已勾选数量
    var totalChildren = $('input[type=checkbox][name='+groupName+']').length;
    var checkedChildren = $('input[type=checkbox][name='+groupName+']:checked').length;

    // 如果已勾选数量等于总数，勾选父选框；否则取消
    parentCb.prop('checked', checkedChildren === totalChildren);
  });
});
</script>

关键改动说明 #

• 拆分事件绑定：把父选框和子选框的事件分开绑定，避免原代码中动态绑定子选框事件可能导致的重复绑定问题。
• 子选框全选判断：每次子选框点击后，获取当前组的所有子选框，统计已勾选的数量。如果已勾选数量等于子选框总数，就自动勾选对应的父选框；只要有一个子选框未勾选，父选框就保持取消状态。
• 精准匹配父选框：通过check-all-for属性和子选框的name精准关联，确保不同组的复选框不会互相干扰。

这样修改后，就能实现完全的双向联动：父选框勾选/取消时，所有子选框同步；所有子选框手动勾选后，父选框自动勾选；只要有一个子选框取消，父选框也会跟着取消。

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