全选功能需通过事件委托与状态聚合实现双向同步：全选框change触发子项.checked批量更新，子项change委托至父容器并过滤disabled项计算indeterminate状态，避免setAttribute和计数器误判。
全选 checkbox 的 DOM 绑定关系怎么建
全选功能本质是「一个控制多个」，关键不在样式或点击动画，而在 checked 状态的单向同步：全选框变化 → 子项同步；子项变化 → 全选框按逻辑更新。不能只靠 onclick 反复绑定，得用事件委托 + 状态聚合。
常见错误是给每个子项单独加 onclick，导致 DOM 节点一多就卡顿，且动态插入的新 checkbox 完全不响应。
- 用
document.querySelector('#check-all')拿全选框，用document.querySelectorAll('.item-check')批量取子项，避免逐个 ID 查找 - 监听全选框的
change事件（不是click），防止空格键、Enter 键触发时失效 - 子项统一用事件委托绑定到父容器，比如
container.addEventListener('change', handleItemChange)，新 append 的 checkbox 自动生效
子项全勾选时全选框怎么自动打钩
不能靠计数器累加再比对长度——如果子项里有 disabled 的 checkbox，它 checked 属性不可写，也不该参与“全选”判定，但 length 仍会计入。必须过滤出可交互的项。
- 判断条件是：
Array.from(items).filter(i => !i.disabled).every(i => i.checked) - 注意
disabled元素的checked值永远是 false，即使手动设为 true 也会被浏览器忽略 - 如果子项有部分 disabled、部分勾选，全选框应置为
indeterminate状态，用el.indeterminate = true设置（仅视觉，不影响 value）
全选框 change 后子项状态怎么批量更新
直接遍历 set checked 最简单，但要注意：不要用 setAttribute('checked', 'checked')，这只会初始化状态，对已渲染的 checkbox 无效；必须操作 DOM 属性 .checked。
- 正确写法：
item.checked = allChecked，其中allChecked是全选框当前的checked值 - 若子项含
disabled，跳过它们，避免误清状态（disabled 项不该被全选逻辑覆盖） - 性能敏感场景（如上千项），避免在循环里反复读取
item.disabled，可先用Array.from()转成数组再 filter 出可操作项
Vue/React 里还要手动操作 DOM 吗
不需要，但容易掉坑：比如在 Vue 中用 v-model 绑定全选框，却对子项用 @change 手动改 data，造成响应式丢失；或者 React 里子项用 checked={item.selected}，但没同步更新全选框的 indeterminate 状态。
- Vue 推荐用计算属性
computed控制全选框的checked和indeterminate，子项用v-model绑定同一数组 - React 中避免直接改 state 数组元素，用
setState(prev => ({...prev, items: prev.items.map(...) }))保证重渲染触发 - 无论框架，
indeterminate是原生 DOM 属性，JSX 或模板里无法用属性绑定，必须用useEffect或mounted钩子手动设置
真正麻烦的从来不是“怎么让全选框变勾”，而是 disabled 项混入、异步加载子项后状态不同步、以及 indeterminate 状态的手动维护——这些地方一漏，用户就会觉得“点了没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
