如何实现Ant Design复选框全选功能及解决功能互斥问题

可运行代码实现 #

HTML 结构 #

<input type="checkbox" id="selectAll"> 全选
<div class="checkbox-group">
  <input type="checkbox" class="item-checkbox"> 选项1
  <input type="checkbox" class="item-checkbox"> 选项2
  <input type="checkbox" class="item-checkbox"> 选项3
  <input type="checkbox" class="item-checkbox"> 选项4
</div>

JavaScript 逻辑 #

const selectAll = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item-checkbox');

// 全选框勾选/取消时同步所有子复选框状态
selectAll.addEventListener('click', function() {
  itemCheckboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 子复选框操作时同步全选框状态
itemCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 检查所有子复选框是否都处于勾选状态
    const isAllChecked = Array.from(itemCheckboxes).every(item => item.checked);
    selectAll.checked = isAllChecked;
  });
});

逻辑说明 #

• 全选框点击时，直接将所有子复选框的checked状态与全选框同步，满足需求1和2。
• 每个子复选框点击时，通过every方法遍历所有子框：
  • 只要有一个子框未勾选，every返回false，全选框自动取消勾选（满足需求3）。
  • 所有子框都勾选时，every返回true，全选框自动勾选（满足需求4）。

你之前功能丢失的常见原因 #

• 仅给部分子复选框绑定了点击事件，导致部分子框操作无法触发全选框状态更新。
• 判断子框状态时用错方法：比如用some（只要一个勾选就返回true）代替every（必须全部勾选才返回true）。
• 事件逻辑冲突：比如子框事件中修改全选框状态后，误触发全选框的点击事件，导致状态混乱。

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