checkbox多选必须name属性值完全相同才能被浏览器归为一组并提交为数组；未勾选的项不提交，后端需检查字段是否存在；javascript应使用queryselectorall('input[name="xxx"]:checked')获取选中值。
checkbox 多选必须用 name 相同
多个 <input type="checkbox"> 要能被当成一组处理，关键不是靠 class 或 id，而是靠 name 属性值一致。浏览器只认这个字段来归组——提交表单时，同名的 checkbox 会把所有勾选项拼成一个数组（或逗号分隔字符串），后端才能一次拿到全部选中值。
常见错误是给每个 checkbox 写了不同 name，比如 name="item1"、name="item2"，结果后端只能收到零散的单个值，甚至漏掉没勾的项（因为未勾选的 checkbox 默认不提交）。
-
name必须完全相同，例如都设为name="category" - 每个
value必须有实际意义，不能全写"on"或空字符串，否则后端无法区分选项 - 不要依赖
id来做逻辑分组，它只用于 DOM 定位或<label></label>关联
JavaScript 获取所有勾选值的正确写法
用 document.querySelectorAll('input[name="category"]:checked') 是最直接的方式，比遍历全部再判断 checked 更高效。注意别用 getElementsByTagName 配合循环，容易漏掉动态插入的节点或写错条件。
示例：假设有一组 name="tag" 的 checkbox：
const selectedTags = Array.from(
document.querySelectorAll('input[name="tag"]:checked')
).map(el => el.value);
这里 Array.from() 是为了兼容老浏览器（IE 不支持 querySelectorAll 返回值直接调用 map）；现代环境可简写为：[...document.querySelectorAll('input[name="tag"]:checked')].map(el => el.value)。
- 别用
document.getElementsByName("tag")然后手动过滤，它返回的是NodeList，但 IE 下行为不一致 - 避免在事件里反复调用
querySelectorAll，如果频繁触发（如搜索筛选），建议缓存节点引用 - 如果 checkbox 是异步渲染（如 Vue/React 组件内），确保 DOM 已挂载再执行查询
表单提交时 checkbox 的空值陷阱
未勾选的 checkbox **根本不会出现在提交数据里**，这是 HTML 规范决定的，不是 bug。所以后端不能假设“没收到 category 就代表全没选”，而要明确检查该字段是否存在——不存在即为空数组，存在则解析其值。
前端若想强制提交“未选中”状态（比如需要区分“用户跳过选择”和“明确不选任何项”），得额外加一个隐藏域：<input type="hidden" name="category" value="">，但这样会让后端多一层判断逻辑，通常不推荐。
- PHP 中
$_POST['category']可能是数组或未定义，需先isset()再处理 - Node.js + Express 默认不解析 checkbox 数组，需确认 body-parser 是否启用
extended: true - 用
FormData手动构造提交时，未勾选的 checkbox 不会被 append，行为与原生表单一致
移动端点击区域太小导致误操作
原生 checkbox 的点击热区只有方框本身，手指点不准就容易漏选。必须配合 <label></label> 标签扩大可点击范围，且 for 属性要严格匹配 checkbox 的 id。
错误写法：<input id="a"><label>选项A</label>（没绑定）；正确写法：<input id="a" type="checkbox" name="opt"><label for="a">选项A</label>。
- 不要只靠 CSS 给
input加width/height，这改变的是方框尺寸，不是点击区域 - 用
label包裹input也可以实现绑定，但要注意嵌套层级，避免影响样式继承 - 部分 Android 浏览器对
for绑定响应延迟，建议同时加上cursor: pointer提示用户可点击
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
