checkbox分组靠name属性相同实现，必须同名且大小写敏感；每个value需不同；id必须唯一；用label包裹并绑定for属性提升可访问性；JS用querySelectorAll按name获取，后端需name加[]才能接收数组。
多个 <input type="checkbox"> 怎么算一组
HTML 里 checkbox 本身没有原生“分组”概念，所谓分组，全靠 name 属性值相同来实现。浏览器只认这个：同名的 checkbox 才会被当做一个逻辑组，提交时才打包成数组（或逗号分隔字符串，取决于后端解析方式）。
常见错误是只靠 id 或 class 模拟分组，结果表单提交时后端收不到多个值，或者只收到最后一个勾选项。
-
name必须完全一致（大小写敏感），比如都用name="hobby" - 每个
checkbox的value要不同，否则后端无法区分选了哪几项 - 不要给同一组 checkbox 设置相同的
id——ID 必须唯一，否则破坏 HTML 规范，JS 查询也会出错
怎么让一组 checkbox 在视觉上对齐又可读
纯靠 <input> 自己没法控制换行、间距或文字对齐，必须配合标签和 CSS。最稳妥的做法是每个 checkbox 都套一个 <label>，并用 for 属性绑定 id。
这样点击文字也能触发勾选，无障碍支持好，样式也容易统一。
立即学习“前端免费学习笔记（深入）”；
- 每个
<input>配一个唯一id，比如id="hobby-music" - 对应
<label for="hobby-music">音乐</label> - 用 CSS 控制
label的 display（如display: block或inline-flex）来实现垂直/水平排列 - 避免用
<br>或空格强行换行——响应式下会错乱
<label><input type="checkbox" name="hobby" value="music" id="hobby-music"> 音乐</label> <label><input type="checkbox" name="hobby" value="reading" id="hobby-reading"> 阅读</label>
JS 怎么批量获取同一组 checkbox 的选中状态
不能用 document.getElementById()，因为 ID 是唯一的；得用 document.querySelectorAll() 按 name 查。
注意返回的是 NodeList，不是数组，直接调用 .map() 会报错，得先转数组或用 forEach。
- 查所有：
document.querySelectorAll('input[name="hobby"]') - 取值时别漏掉
checked判断，未勾选的value不该计入结果 - 如果用
FormData提交，直接传整个表单，它会自动收集同名 checkbox 的所有已选value - IE11 不支持
NodeList.forEach，需用Array.from()或传统for循环
后端接收 checkbox 数组时为什么只拿到一个值
这是最常见的连带问题：前端看着勾了三个，后端 PHP/Python/Node.js 却只收到最后一个。根本原因不是 HTML 写错了，而是服务端解析逻辑默认把同名字段当单值处理。
比如 PHP 中 $_POST['hobby'] 默认是字符串，不是数组；要让它变成数组，HTML 的 name 得写成 name="hobby[]"（末尾加 []）。
- PHP 必须用
name="hobby[]"，否则只取最后一个 - Python Flask/Django 通常能自动聚合同名字段，但显式用
request.form.getlist('hobby')更可靠 - Node.js 的
body-parser默认不合并，需配置extended: true并确保前端 name 带[] - 哪怕不用后端，仅用
FormData+fetch，也要注意FormData.getAll('hobby')才能拿到全部，get()只返回第一个
name 加不加 [] 这个细节，前端看着没区别，后端却可能直接丢数据——很多人调试半天才发现是这儿卡住了。 
