多选框必须用相同name属性分组，因浏览器原生提交和js查询仅依赖name；name不一致会导致前端查不到、后端收不到数组，常见错误包括name不同、含空格或与全选按钮共用name。
多选框不是靠 class 或 data-* “分组”，而是靠 name 属性值一致才能被浏览器识别为同一逻辑组——这是后端接收、JS 批量操作、表单验证的唯一依据。
为什么必须用 name 相同来分组？
浏览器原生行为只认 name：提交时，所有 name="hobbies" 的勾选项会拼成 hobbies=reading&hobbies=music；JS 用 document.querySelectorAll('input[name="hobbies"]') 才能一次拿到全部节点。其他方式（比如 class="hobby-item"）无法触发原生表单序列化，也无法被后端框架（如 Flask 的 request.form.getlist()）识别为数组。
常见错误包括：
- 给每个 checkbox 写不同
name（如name="hobby1"、name="hobby2"），结果 JS 查不到多个元素，后端只收到零散键名 - 全选按钮和目标 checkbox 共用同一个
name，导致提交时混入一个无意义的hobbies=on -
name值含空格或特殊字符（如name="user interests"），造成 JS 选择器失效或后端解析失败
name 命名怎么写才兼容前后端？
命名直接影响后端能否正确收数组。不同框架对 name 解析逻辑不同，不能只写 name="hobbies" 就完事：
- Flask/Django：可直接用
name="hobbies"，后端调request.form.getlist("hobbies") - PHP：推荐
name="hobbies[]"，$_POST["hobbies"]自动是数组；不加[]时只取最后一个值 - Express + body-parser：默认只取第一个同名值，必须配置
extended: true，否则req.body.hobbies是字符串而非数组
最稳做法：打开浏览器 Network → Payload 标签页，确认实际发出的键名是 hobbies[] 还是 hobbies，再比对后端日志里接收到的结构。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
全选按钮该不该有 name？
不该有，或必须设为无关值。全选按钮本质是控制开关，不是数据项：
- 用
<input type="checkbox" id="select-all-hobbies">，不设name，或设为name="select_all_toggle" - 目标 checkbox 统一用
name="hobbies"（或name="hobbies[]"） - 别用
<button></button>实现全选——需手动维护aria-checked、键盘空格响应、视觉状态同步，成本远高于一个干净的 checkbox
监听事件也得对应：全选框监听自己的 change，目标组统一监听父容器的 change 并用 e.target.matches('input[name="hobbies"]') 过滤，避免在每个子项上重复绑定。
批量操作时容易忽略的 DOM 查询细节
document.querySelector('input[name="hobbies"]') 永远只返回第一个——这不是 bug，是设计如此。多选场景下必须用 querySelectorAll：
- 要操作全部（如全选/反选）：
document.querySelectorAll('input[name="hobbies"]') - 要收集已勾选项：
document.querySelectorAll('input[name="hobbies"]:checked') - 别用
getElementsByName("hobbies")：返回 HTMLCollection，不支持forEach，且动态插入新项后可能不更新 - 查一次就缓存：不要在循环里反复调
querySelectorAll，尤其在change回调中
真正麻烦的不是写几行 JS，而是 name 值一旦写错或不统一，整个组就“失联”——前端查不到、后端收不到、调试时 Network 里 payload 看着正常，但服务端 log 里压根没这个字段。这种问题往往卡在命名一致性上，而不是逻辑本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
