← 返回目录

16. 实战：全选反选与已选计数

这是购物车全选的经典逻辑：顶框管所有子框、子框反过来管顶框（用 every 判断是不是全选了）、反选、实时数选了几个。核心就一个属性：复选框的 .checked（true 打勾 / false 没打勾）。

16.1 实战（勾一勾试试）

16.2 核心代码拆解

① 顶框控制所有子框

let all = document.getElementById('allCheck'); // 抓到顶框
all.addEventListener('change', function () { // 顶框一勾或取消就跑
  items.forEach(item => item.checked = all.checked); // 每个子框都跟顶框走
});
	

② 子框反过来管顶框（every 判断）

items.forEach(item => { // 给每个子框都绑
  item.addEventListener('change', function () { // 某个子框一改就跑
    // 只有"每一个都打勾"，顶框才打勾
    let allChecked = Array.from(items).every(i => i.checked); // 是不是每个都勾了
    all.checked = allChecked; // 把结果写回顶框
  });
});
	

如果你用错方法判断全选，顶框状态会不对。记住用 every——它是"每一个都满足才 true"，正好表达"全部打勾"。

③ 反选 + 数个数

reverseBtn.addEventListener('click', function () { // 点反选按钮
  items.forEach(item => item.checked = !item.checked); // 打勾变不打、不打变打
});

function updateCount() { // 数一下选了几个
  // 数一下 checked 为 true 的有几个
  let n = Array.from(items).filter(i => i.checked).length; // 只留勾上的，数个数
  count.textContent = n; // 把数字显示出去
}
	

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：购物车全选、批量操作、勾选审核。

② 常见坑：子框联动顶框判断写错；反选后顶框不同步。

③ 怎么解决：用 Array.every 判断是否全选；反选后重新同步顶框和计数。