HTML表单复选框多选需name统一、value唯一，用change事件监听并直接赋值checked，选中值须从:checked复选框读取cb.value，分页搜索时应转向数据驱动状态管理。
HTML表单复选框的多选功能不是靠“加几个 <input type="checkbox">”就完事的，关键在 name 和 value 的配合、事件监听方式、以及状态同步逻辑。漏掉任一环，提交时拿不到数据，或全选/反选行为错乱。
复选框必须设 name 和 value 才能真正多选
只写 <input type="checkbox"> 是无效的：浏览器不会把它当作可提交字段，后端收不到；不设 value 时默认提交 "on"，所有项无法区分。
-
name必须统一（如name="user_id"），这样表单提交时才会被聚合成数组，后端才能以user_id[]=101&user_id[]=102形式接收 -
value必须唯一且有意义（如数据库 ID、UUID），别用1/2这类无上下文数字——排序、分页、过滤后索引就失效了 - 避免用
id控制批量行为：动态渲染时易重复，document.getElementById只返回第一个，不可靠 - 示例正确结构：
<input type="checkbox" name="user_id" value="u_7f3a2b">
全选逻辑必须用 change 事件 + 直接赋值 checked
监听 click 会导致键盘操作（空格键切换）失效，用 setAttribute('checked', ...) 只影响初始渲染，对已存在的 DOM 无效。
- 全选框绑定
change，遍历目标复选框并直接赋值：cb.checked = master.checked - 目标复选框也需绑定
change，用于反向更新全选框状态：统计document.querySelectorAll('input[name="user_id"]:checked').length - 部分勾选时，必须手动设
selectAll.indeterminate = true（注意：要先设false再设true，否则可能残留旧态） - 查询范围要精确，比如用
tbody input[name="user_id"]，避开表头自身和其它区域
获取选中值必须从复选框本身读取，不能依赖 DOM 顺序
表格有分页、搜索、排序时，tr 的 DOM 顺序 ≠ 数据原始顺序。靠 rows[0].dataset.id 或 cells[1].textContent 取值极易出错。
立即学习“前端免费学习笔记（深入）”；
- 最稳方式：遍历所有
: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，更可控 - 移动端要注意点击区域：复选框太小，必须包裹
<label></label>或设min-width，否则用户点不中
真正麻烦的不是加复选框，而是当表格支持分页、搜索、虚拟滚动、甚至服务端渲染时，querySelectorAll 拿到的永远只是当前视图内的节点。这时候靠 DOM 驱动的状态管理会立刻崩，必须转向数据驱动——把选中状态存在 JS 对象里，再和 UI 双向同步。
