复选框需设相同name（如hobby）且唯一value（如reading/coding/gaming）才有效；提交时仅勾选项以数组形式发送，无勾选则字段不存在；JS获取应用[...form.elements.hobby].filter(cb=>cb.checked).map(cb=>cb.value)。
复选框的 name 和 value 怎么设才有效
复选框提交时只发送「被勾选」的项，且必须带 value，否则后端收不到有意义的数据。如果多个 <input type="checkbox"> 逻辑上属于同一组（比如“兴趣爱好”），它们的 name 必须相同；但每个的 value 要唯一，否则无法区分选了哪几项。
-
name相同是让表单把它们当一组处理的前提，否则后端收到的是多个独立字段 - 不写
value时默认值是"on"，但这样所有勾选项都传"on"，毫无区分度 - 常见错误：复制粘贴时漏改
value，导致多个复选框提交相同值
<input type="checkbox" name="hobby" value="reading"> 阅读<br><input type="checkbox" name="hobby" value="coding"> 编程<br><input type="checkbox" name="hobby" value="gaming"> 游戏
怎么判断哪些复选框被选中（JavaScript）
不能用 document.querySelector('input[name="hobby"]') 直接取值——它只返回第一个匹配项。得用 querySelectorAll 拿到 NodeList，再遍历过滤出 checked 为 true 的。
-
form.elements['hobby']返回的是HTMLFormControlsCollection，支持forEach，比querySelectorAll更语义化 - 注意：如果一个
name下没有任何复选框被选中，后端收不到这个字段（不是null或空数组，而是根本不存在） - 想在 JS 中获取所有已选项的
value数组，推荐写法：[...form.elements.hobby].filter(cb => cb.checked).map(cb => cb.value)
后端接收时为什么只收到一个值或报错
PHP、Node.js、Python Flask 等框架对同名复选框的解析方式不同，但核心问题往往出在前端没配对或后端没适配数组接收。
- PHP 默认把同名复选框识别为数组，但前提是
name后加[]，比如name="hobby[]"；否则只取最后一个勾选项 - Node.js 的
body-parser默认不自动合并同名字段，需手动用req.body.hobby instanceof Array判断，或改用express.urlencoded({ extended: true }) - Flask 中
request.form.getlist('hobby')是正确姿势，get()只拿第一个
样式和可访问性容易被忽略的点
直接改 <input> 的样式非常受限，普遍做法是隐藏原生控件，用 <label> 包裹并绑定 for 或嵌套关系。但这么做会破坏屏幕阅读器对 checked 状态的播报，除非补全 ARIA 属性。
立即学习“前端免费学习笔记（深入）”；
- 必须给每个复选框加
id，并在对应<label>里用for属性关联，否则点击文字无法触发勾选 - 如果用伪元素模拟勾选状态，要同步控制
aria-checked属性，否则视障用户无法感知当前状态 - 别用
display: none或visibility: hidden隐藏原生复选框——这会让它完全脱离可访问树
真正难的不是让复选框“看起来能用”，而是让它在键盘操作、屏幕阅读、表单验证、跨浏览器提交这些环节都不掉链子。
