jQuery全选/取消全选功能异常：无法清空数组及取消勾选

你现在的问题核心在于只处理了「All」复选框选中时的添加逻辑，却没覆盖取消选中时的清空操作，而且数组更新时没有做重置，导致重复追加内容。下面是具体的修复方案：

核心思路 #

给「All」复选框绑定change事件，根据它的选中状态分两种场景处理：

• 选中时：勾选所有子复选框，直接重置filter数组并填充所有子项的值（避免重复）
• 取消选中时：取消所有子复选框的勾选，直接清空filter数组

同时补充子复选框与「All」的联动逻辑，避免手动操作子项时出现状态不一致的情况。

完整代码实现 #

HTML/PHP 部分（保留你的原有渲染逻辑） #

<?php if(!empty($items)){ ?>
<input class="form-check-input select-item" data-item="All" type="checkbox" id="select-all">
<label class="form-check-label" for="select-all">All</label>
<?php foreach($items as $item){ ?>
<input class="form-check-input select-item" data-item="<?php echo $item['id']; ?>" type="checkbox" id="item-<?php echo $item['id']; ?>">
<label class="form-check-label" for="item-<?php echo $item['id']; ?>"><?php echo $item['name']; ?></label>
<?php } ?>
<?php } ?>

JavaScript 部分（关键修复逻辑） #

// 初始化你的filter数组
let filter = [];

// 获取全选框和所有子项复选框
const selectAllCheckbox = document.getElementById('select-all');
const itemCheckboxes = document.querySelectorAll('.select-item[data-item!="All"]');

// 绑定全选框的change事件
selectAllCheckbox.addEventListener('change', function() {
  const isAllChecked = this.checked;
  
  // 同步所有子项的勾选状态
  itemCheckboxes.forEach(checkbox => {
    checkbox.checked = isAllChecked;
  });
  
  // 更新filter数组
  if (isAllChecked) {
    // 选中All时，直接赋值为所有子项的集合（自动覆盖原有内容，避免重复）
    filter = Array.from(itemCheckboxes).map(box => box.dataset.item);
  } else {
    // 取消All时，直接清空数组
    filter = [];
  }
  
  // 这里可以添加你后续需要的业务逻辑，比如提交filter数组等
  console.log('当前filter数组:', filter);
});

// 绑定子项复选框的change事件，同步全选框状态
itemCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 判断是否所有子项都被选中
    const allItemsChecked = Array.from(itemCheckboxes).every(box => box.checked);
    selectAllCheckbox.checked = allItemsChecked;
    
    // 更新filter数组：只保留被选中的子项
    filter = Array.from(itemCheckboxes)
      .filter(box => box.checked)
      .map(box => box.dataset.item);
    
    console.log('当前filter数组:', filter);
  });
});

关键修复点说明 #

1. 避免重复添加：选中「All」时不再使用push方法追加内容，而是直接将数组重置为所有子项的集合，从根源上避免重复值
2. 取消全选的清空逻辑：当「All」被取消勾选时，直接将filter设为空数组，同时同步取消所有子项的勾选状态
3. 子项联动同步：手动勾选/取消子项时，自动判断是否所有子项都已选中，同步更新「All」复选框的状态，保证UI和数据的一致性

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