checkbox 多选组需 name 相同（如 name="hobby" 或 name="hobby[]"），value 必须显式设置，label 应正确关联提升可访问性，js 获取选中值需转换 nodelist 为数组，监听 change 而非 click 事件。
name 属性必须相同才能形成多选组
多个 input type="checkbox" 要被后端识别为同一组选项（比如“兴趣爱好”），它们的 name 属性值必须完全一致。否则浏览器会把每个 checkbox 当作独立字段处理，提交时只发单个键值对，后端收不到数组。
常见错误现象：勾选了三个，后端只收到一个值；或 PHP 中 $_POST['hobby'] 是字符串而非数组。
- 正确写法：
name="hobby"或更明确的name="hobby[]"（[]是 PHP 等语言约定，提示后端按数组解析） - 错误写法：
name="hobby1"、name="hobby2"—— 这样每个 checkbox 都是孤立字段 - 注意：HTML 标准本身不强制用
[]，但后端框架（如 Laravel、Django）通常依赖命名惯例来聚合多值
value 属性不能省略，否则提交默认值 "on"
如果没写 value，用户勾选后提交的值就是 "on"，不是你想要的语义化数据（比如 "reading" 或 "coding"）。后端拿到一堆 "on"，根本无法区分用户到底选了哪一项。
使用场景：权限配置、标签筛选、兴趣收集等，都需要可读、可映射的 value。
- 必须显式设置：
value="design"、value="backend" -
checked是布尔属性，写上即生效，不用checked="true" - 未勾选的 checkbox 完全不参与表单提交 —— 后端收不到该字段，不是
null，而是压根不存在
label 标签不是可选，而是点击体验和可访问性的关键
只写 <input type="checkbox">音乐，用户只能点中那个小方框（移动端尤其难操作）。加上 <label></label> 并正确关联 for 和 id，点文字就能触发勾选。
容易踩的坑：漏掉 id，或 for 值拼错，导致 label 失效；用 onclick 手动切换 checked 会破坏原生行为（如键盘空格切换）。
- 推荐结构：
<input id="music" type="checkbox" name="interest" value="music"><label for="music">音乐</label> - 或者嵌套写法：
<label><input type="checkbox" name="interest" value="music">音乐</label>（更简洁，无需 id） - 移动端建议加
label的padding，扩大点击热区
JavaScript 获取选中值时别直接遍历 NodeList
document.querySelectorAll('input[name="interest"]:checked') 返回的是 NodeList，不是 Array，不能直接调用 .map() 或 .forEach()（部分老环境会报错）。
性能影响不大，但写错会导致脚本中断，尤其在监听 change 事件时逻辑断掉。
- 安全写法：
Array.from(checkboxes).map(cb => cb.value)或[...checkboxes].map(cb => cb.value) - 监听事件必须用
change，不是click——click可能在checked状态更新前触发 - 批量设状态（如全选）时，改完
cb.checked = true后，如需通知框架（React/Vue），得手动dispatchEvent(new Event('change', { bubbles: true }))
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
