复选框需同时设置name、value、label属性才能正常工作：name相同形成选项组，value明确语义化值，label保障可访问性；禁用项不提交且不匹配:checked，indeterminate状态须js设置。
复选框不是“加个type="checkbox"就能用”，name、value、label 三个属性漏掉任何一个，后端收不到数据或用户点不中都是大概率事件。
name 属性必须相同才能形成多选组
多个 input type="checkbox" 要被识别为同一组（比如“兴趣爱好”），它们的 name 值必须完全一致。否则浏览器当独立字段处理，提交时只发单个键值对。
- 正确写法：
name="hobby"或更明确的name="hobby[]"（PHP/Laravel/Django 等后端依赖这种命名约定解析为数组） - 错误写法：
name="hobby1"、name="hobby2"——每个 checkbox 都孤立，后端$_POST['hobby']可能是字符串或 undefined - 表单提交后，未勾选的 checkbox 根本不会出现在请求参数里，不是
null，而是字段压根不存在
value 属性不能省略，否则提交默认值 "on"
没写 value，勾选后提交的值就是 "on"，后端拿到一堆无法映射语义的字符串，根本分不清用户选的是“阅读”还是“运动”。
- 必须显式设置：
value="reading"、value="sports" - 在表格行选择场景中，
value应设为业务 ID（如value="101"），别用序号或空字符串 - 禁用的 checkbox（
disabled）不会参与提交，即使它被勾选了——这点常被忽略，导致前后端 ID 数量对不上
label 不是可选，而是点击体验和可访问性的刚需
只写 <input type="checkbox">音乐，用户只能点中那个小方块，移动端尤其难操作。label 缺失 = 可访问性失败 + 用户流失。
- 推荐嵌套写法：
<label><input type="checkbox" name="interest" value="music">音乐</label>（无需id/for，简洁可靠） - 若用
for方式，必须确保for值与对应input的id完全一致，拼错就失效 - 别用
onclick手动切换checked，会破坏键盘空格切换、屏幕阅读器行为等原生逻辑
JavaScript 获取选中值时别直接遍历 NodeList
document.querySelectorAll('input[name="hobby"]:checked') 返回的是 NodeList，不是 Array，直接调用 .map() 或 .forEach() 在部分环境会报错，尤其在 change 事件监听里中断逻辑。
- 安全写法：
Array.from(checkboxes).map(cb => cb.value) - 监听事件优先用
change，不是click——change只在真实状态切换时触发，兼容键盘、触屏、辅助工具 - 表格中做全选/半选，
indeterminate状态只能通过 JS 设置（el.indeterminate = true），HTML 属性无效，且需手动同步所有子项状态
最易被忽略的其实是禁用项的处理：JS 动态禁用 checkbox 后，它既不会提交，也不会被 :checked 伪类匹配到，但用户可能仍看到它被勾选着——视觉与实际状态脱节，需要额外清理 UI 或加灰样式同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
