javascript 实现 html 列表批量勾选需统一用 element.checked = boolean 直接赋值、监听 change 事件、缓存 checkbox nodelist、正确设置 indeterminate 状态、维护独立 set 同步选中 id，避免 dom 与状态脱节。
怎么用 JavaScript 实现 HTML 列表的批量勾选（全选/反选/状态同步）
核心在于控制 checkbox 的 checked 属性与「全选框」状态联动，而不是只监听点击——否则反选或手动改 DOM 会导致状态错乱。
常见错误现象：全选框被勾上，但下面列表项没变；或者点了一半再点全选，状态不一致；甚至用 <code>click() 模拟点击触发多次事件造成死循环。
- 必须统一用
element.checked = boolean直接赋值，避免依赖事件触发 - 监听
change事件而非click，防止 Safari/iOS 上点击 label 不触发 click 但会触发 change - 「全选框」本身也要参与状态计算：当所有子项都为 true 时它才为 true；任意一个为 false 就设为 indeterminate 或 false（取决于设计）
- 不要用
querySelectorAll('input[type="checkbox"]')每次都查全部——先缓存列表项 NodeList，避免重复 DOM 查询
如何正确处理 indeterminate 状态（“半选”图标）
indeterminate 是原生 checkbox 支持但常被忽略的状态，它不改变 checked 值，只影响视觉。很多 UI 库靠 class 模拟，其实原生就能做。
使用场景：当部分子项被选中、但不是全部时，全选框显示横线（—），表示“中间态”。这个状态不能通过 HTML 属性设置，只能用 JS。
- 设置方式：
selectAllCheckbox.indeterminate = true（注意：这不会影响checked值） - 清除方式：设为
false即可，无需额外操作 - 注意兼容性：
indeterminate在所有现代浏览器都支持，但 IE11 及更早版本不支持（需降级为 unchecked + class 模拟） - 判断逻辑别写成
if (item.checked === false)，而要用!item.checked && item.indeterminate === false避免误判
批量操作后怎么安全获取已选项数据（避免 DOM 与 JS 状态不一致）
别直接遍历 DOM 取 input.checked——如果用户用 JS 修改了某个 checkbox 的 checked 但没触发事件，DOM 状态就和你的业务逻辑脱节了。
推荐做法：维护一个独立的 ID 映射对象或 Set，在每次状态变更时更新它，而不是每次都去读 DOM。
- 初始化时：用
Array.from(checkboxes).reduce((acc, cb) => { if (cb.checked) acc.add(cb.value); return acc; }, new Set()) - 监听 change 时：根据
event.target.checked增删对应value（或dataset.id） - 执行批量操作前，直接读这个 Set，比
document.querySelectorAll('input:checked')更可靠、也更快 - 如果后端返回的是数组 ID，建议用
Set而非数组存储，去重和查找都是 O(1)
Vue/React 项目里要不要手写这套逻辑？
要，但只在需要精细控制或复用性要求高的场景下。框架自带的 v-model / useState 很容易写出「状态不同步」的 bug，尤其涉及全选反选这种跨层级联动。
比如 Vue 中用 v-model 绑定一个布尔值到全选框，再用另一个数组绑定子项，稍不注意就会出现：子项数组变了，但全选框没响应；或者反选后子项数组长度对不上。
- React 推荐用
useReducer管理 checkbox 群组状态，把「全选」「反选」「单个切换」作为 action type - Vue 3 的
computed({ get, set })可以封装全选框的双向逻辑，但 set 里必须同时更新子项数组和全选状态 - 不管什么框架，只要涉及「全选框状态由子项决定」，就必须在子项变更后重新计算全选状态——不能靠模板里的三元表达式硬写
最易被忽略的一点：服务端分页时，前端的「全选」往往只是当前页全选，但用户直觉可能认为是全部数据全选。这个语义必须显式区分，比如加个「全选本页」和「全选所有」按钮，否则后期改起来非常痛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
