直接用 input[type="checkbox"]，name 相同、value 唯一、监听 change；html 中每个复选框须为独立标签且含 name 和 value；js 取值用 document.queryselectorall('input[name="tag"]:checked') 转数组；全选逻辑需同步 checked 与 indeterminate 状态；后端接收需匹配 payload 格式。
直接用 input[type="checkbox"] 就行，别绕弯；name 相同、value 唯一、监听 change，三者缺一不可。
怎么写 HTML 结构才不会丢数据
每个复选框必须是独立的 <input> 标签，不能靠 JS 动态生成后漏掉 name 或 value。常见错误是只写了 <input type="checkbox">，结果提交时全是 on 或根本没字段。
-
name必须一致（如name="tag"），否则表单提交时后端收不到数组 -
value必须唯一且有意义（如value="backend"），别用索引或空字符串 - 避免用
id批量控制——动态渲染时极易重复，改用data-id或直接读value - 如果和
<label></label>配合，推荐包裹写法：<label><input type="checkbox" name="tag" value="dev">开发</label>，比for/id更稳，尤其对 Vue/React 动态列表
JavaScript 怎么安全取到所有选中值
别用 document.querySelector('input[name="tag"]') —— 它只返回第一个，永远拿不全。也别遍历所有再判断 checked，效率低还容易漏掉 disabled 项。
- 一行搞定：
document.querySelectorAll('input[name="tag"]:checked')，天然过滤掉未勾选和disabled的 - 要转成值数组：
Array.from(document.querySelectorAll('input[name="tag"]:checked')).map(cb => cb.value) - 如果用表单元素访问：
form.elements.tag返回的是HTMLFormControlsCollection，支持forEach，但注意它包含所有同名控件（包括未勾选的），得手动筛 - 不要用
getElementsByName("tag")：返回HTMLCollection，不支持forEach，且在 DOM 变更后可能不更新
全选/反选逻辑为什么总不同步
核心问题是只做了「单向控制」：点了全选框就设所有子项 checked = true，但用户手动取消某一项时，全选框状态没变。更麻烦的是，indeterminate 状态只能靠 JS 手动设，HTML 里写不上。
- 全选框监听
change，不是click—— 否则键盘用户按空格无法触发 - 每行列复选框也要监听
change，统计已勾数量：const checked = document.querySelectorAll('input[name="tag"]:checked').length - 根据数量同步全选框：
if (checked === total) master.checked = true; else if (checked === 0) master.checked = false; else master.indeterminate = true -
master.indeterminate = true不会触发change事件，所以后续逻辑别依赖它发事件 - 表格有分页或虚拟滚动时，
total必须是当前可见行数，不是全量数据总数 —— 否则「全选」语义就错了
后端收不到数组？先看 Network 的 Payload
浏览器发出的数据格式和你写的 HTML 不一定一致。比如 name="hobby" 在 Flask 是 request.form.getlist("hobby")，但在 Express 默认配置下，req.body.hobby 是字符串而非数组。
- 打开浏览器 DevTools → Network → 找对应请求 → 看 Payload：确认键名是不是你预期的，值是不是多个同名字段（如
hobby=reading&hobby=music） - PHP 推荐
name="hobby[]"，但注意 JS 里el.name会得到字符串"hobby[]"，别误判为非法字符 - Express + body-parser 要设
extended: true，否则同名字段只取第一个 - 移动端点击区域小？给
<label></label>加display: block或最小宽高，别只靠 checkbox 本身响应
最常被忽略的一点：表格里加复选框时，value 必须是业务主键，不是渲染序号；哪怕 DOM 顺序变了、分页了、排序了，只要 value 没变，拿到的数据就准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
