复选框多选需确保name统一、value唯一且可识别，全选逻辑用change事件直接赋值checked并设indeterminate，选中值必须从:checked复选框读取cb.value。
复选框多选不是加几个 <input type="checkbox"> 就能跑通的，name 和 value 没配对、事件监听用错、状态读取靠 DOM 顺序——这三处任一出错，后端就收不到数组，或全选逻辑反复错乱。
name 和 value 必须同时设，且有明确分工
只写 <input type="checkbox">，表单提交时字段直接消失；不设 value，所有项都提交默认值 "on"，后端根本分不清是哪几条数据。
-
name必须统一（如name="user_id"），浏览器才把它们聚合成一个字段，后端才能以user_id[]=101&user_id[]=102形式解析为数组 -
value必须唯一且业务可识别（如数据库 ID、UUID），别用1/2这类序号——表格一排序或分页，索引就和真实数据对不上 - 全选框自己不要共用同一个
name，建议不设name或设成name="select-all"，避免被当成一条数据提交
全选逻辑必须用 change 事件 + 直接赋值 checked
用 click 会漏掉空格键切换、屏幕阅读器操作；用 setAttribute('checked', ...) 只影响初始渲染，对已存在 DOM 无效。
- 全选框监听
change，遍历目标复选框并直接赋值：cb.checked = master.checked - 每个目标复选框也监听
change，用于反向更新全选框：document.querySelectorAll('input[name="user_id"]:checked').length统计数量 - 部分勾选时，必须手动设
selectAll.indeterminate = true；注意顺序：先selectAll.indeterminate = false再设true，否则旧态残留 - 查询范围要精确，比如用
tbody input[name="user_id"]，避开表头和其他区域
获取选中值必须从 :checked 复选框本身读取
表格支持分页、搜索、排序后，tr 的 DOM 顺序 ≠ 数据原始顺序。靠 rows[0].dataset.id 或 cells[1].textContent 取值，十次有八次提交错 ID。
- 最稳方式：遍历所有
:checked复选框，直接读cb.value：Array.from(document.querySelectorAll('input[name="user_id"]:checked')).map(cb => cb.value) - 如果需要完整数据对象，建议渲染时把序列化 JSON 存进
data-row-json（注意 HTML 转义），而不是运行时拼字段 - 别用
getElementsByClassName：返回实时集合，循环中修改checked可能跳项；querySelectorAll返回静态 NodeList，更可控
移动端点击区域小是高频翻车点
原生复选框默认尺寸约 13×13px，手指点不中是常态，不是用户手抖。
- 必须包裹
<label></label>，点击文字也能触发；或者给input设min-width: 24px; min-height: 24px; - 别依赖
for/id关联——动态生成时id易重复；用<label><input>文本</label>结构最省心 - 如果表格用了虚拟滚动或服务端分页，记得每次数据刷新后重新绑定事件，别让 JS 监听器挂在已销毁的 DOM 上
真正麻烦的从来不是“怎么画个勾”，而是当表格叠加了搜索、分页、排序、甚至虚拟滚动之后，DOM 和数据状态之间的映射关系会悄悄断开——这时候靠视觉调试几乎无效，必须从 :checked 出发，逆向确认每一步的数据来源是否可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
