input type="checkbox" 多选关键在 name 一致、value 唯一且有意义、提交逻辑匹配后端：name 相同才能被识别为数组；value 应为业务主键（如 id）；javascript 用 :checked 伪类获取选中值；未勾选的 checkbox 不提交数据，后端需判空处理。
HTML 中的 input type="checkbox" 本身就能多选，不需要额外配置 multiple 属性（它根本不支持这个属性），关键只在三点：name 一致、value 有意义、提交逻辑匹配后端接收方式。
name 必须完全相同才能被后端当数组收
浏览器只靠 name 属性把 checkbox 归为一组。如果写成 name="tag1"、name="tag2"，后端收到的就是零散字段，不是列表。
- 正确写法：
name="category"所有相关项都用这个值 - PHP 中用
$_POST['category']直接拿到数组；Flask 用request.form.getlist('category') - Node.js +
body-parser默认只取第一个值，得配extended: true或改用name="category[]" - 别在
name里加空格或点号，比如name="user interests"或name="user.interests"，容易解析失败
value 必须唯一且带业务含义
不设 value 时，勾选提交的默认值是 "on"，所有选项都一样，后端根本分不清用户选了苹果还是香蕉。
- 表格场景下，
value应该是数据库 ID 或业务主键，比如value="1024" - 避免用序号（
value="1"）、布尔字符串（value="true"）或空字符串 - 如果 value 是数字，后端注意类型转换——有些框架会自动转成整数，有些保持字符串
- 动态渲染（Vue/React）时，确保每次更新都保留
value，别被 key 机制清掉
JavaScript 获取选中值必须用 :checked 伪类
用 document.querySelectorAll('input[name="category"]:checked') 是最准最快的方式。其他写法要么漏项，要么兼容性差。
- 别用
document.getElementsByName('category')再手动过滤 —— IE 返回的 NodeList 不支持forEach，且行为不一致 - 别用
document.querySelectorAll('input[type=checkbox]')然后遍历判断checked—— 多余计算，还可能误抓 disabled 项 - 现代环境可直接写：
[...document.querySelectorAll('input[name="category"]:checked')].map(el => el.value) - 如果频繁调用（如搜索筛选），建议缓存节点引用，避免重复查询
- 异步渲染（如分页加载）后，要等 DOM 挂载完成再执行查询，否则返回空
表单提交时未勾选的 checkbox 根本不发数据
这是 HTML 规范，不是 bug。后端不能假设“没收到字段 = 全都没选”，而要检查字段是否存在。
- PHP 中：
isset($_POST['category']) ? $_POST['category'] : [] - Flask 中：
request.form.getlist('category') or [] - 想区分“用户跳过选择”和“明确不选任何项”，得加隐藏域：
<input type="hidden" name="category" value="">，但会增加后端判断负担，通常不推荐 - 全选框的
indeterminate状态只能通过 JS 设置，HTML 里没有对应属性；它不会触发change事件，需单独判断
最容易被忽略的是：表格中 checkbox 的 value 和真实数据顺序无关，只和它自身的 value 或 data-id 有关。分页、排序、搜索后，DOM 节点顺序变了，但只要 value 没丢，收集逻辑就依然可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
