如何使用JavaScript实现复选框组全选、取消全选及选中值管理？

问题根因 #

• 全选函数逻辑混乱：提前将所有子复选框设为未选中，后续判断逻辑完全颠倒，且每次循环都重复操作数组，没有和全选框的实际选中状态绑定
• 单个复选框触发函数没有判断选中状态：无论勾选还是取消都直接往数组追加数据，没有对应删除逻辑

修正后的可运行代码 #

JS部分

var checkedItems = [];

function check() {
  const isCheckAll = document.getElementById('checkAll').checked;
  const checkboxes = document.querySelectorAll('.checkboxes');
  // 先清空数组再同步状态
  checkedItems = [];
  checkboxes.forEach(checkbox => {
    checkbox.checked = isCheckAll;
    if (isCheckAll) {
      checkedItems.push(checkbox.getAttribute('data-value'));
    }
  });
  console.log(checkedItems);
}

function checkSingle(e) {
  const currVal = e.target.getAttribute('data-value');
  if (e.target.checked) {
    // 选中时追加，先判重避免异常重复数据
    if (!checkedItems.includes(currVal)) {
      checkedItems.push(currVal);
    }
  } else {
    // 取消选中时过滤掉对应值
    checkedItems = checkedItems.filter(item => item !== currVal);
  }
  // 单个勾选变化时同步全选框状态：子复选框全部选中则全选框自动勾选
  const checkboxes = document.querySelectorAll('.checkboxes');
  document.getElementById('checkAll').checked = Array.from(checkboxes).every(cb => cb.checked);
  console.log(checkedItems);
}

HTML部分（仅修正了第一个label for属性的拼写错误）

<input type="checkbox" id="checkAll" onchange="check()">
<label for="checkAll"> check all</label><br>
<input type="checkbox" id="vehicle1" class="checkboxes" onchange="checkSingle(event)" name="vehicle1" value="Bike" data-value="50">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" class="checkboxes" value="Car" onchange="checkSingle(event)" data-value="60">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" class="checkboxes" name="vehicle3" onchange="checkSingle(event)" value="Boat" data-value="60">
<label for="vehicle3"> I have a boat</label><br>

功能说明 #

• 全选/取消全选会同步更新checkedItems数组，取消全选时数组自动清空
• 单个复选框勾选时追加对应data-value，取消时自动从数组中移除对应值
• 当所有子复选框手动全部勾选时，全选框会自动同步为选中状态

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