checkbox必须显式设置value，否则浏览器默认赋值“on”，导致后端无法区分具体选项；需配合name、id与label提升可访问性；js读取需用checked判断状态，批量获取应用queryselectorall加:enabled伪类和map提取value。
直接用 <input type="checkbox"> 就能创建复选框，但必须配 name 和 value 才能被后端或 JS 正确读取；不加 id + label 关联会导致可访问性差、点击体验差。
为什么 checkbox 必须显式设置 value？
浏览器默认给未设 value 的 checkbox 赋值为 "on"，但这会掩盖真实业务语义。比如用户勾选“接收邮件通知”，后端收到 email_notify=on 完全无法区分是哪个选项。
- 表单提交时，只有被勾选的 checkbox 才会发送数据，格式为
name=value - 多个同
name的 checkbox（如兴趣标签）可共用一个字段名，靠不同value区分选项：<input type="checkbox" name="hobby" value="reading"> - JS 获取值时，
element.value永远返回字符串，和是否勾选无关；判断状态要用element.checked
如何让点击文字也能切换 checkbox？
单纯写 <input type="checkbox"> 接收通知 是无效的：文字不是控件一部分，点击无反应。必须用 label 显式绑定。
- 推荐写法：给
input加id，label用for属性指向它：<input id="notify" type="checkbox" name="notify" value="email"><label for="notify">接收邮件通知</label> - 嵌套写法也合法（
label包住input），但不利于样式控制和部分屏幕阅读器识别 - 漏掉
id或for不匹配，会导致点击文字无效——这是前端验收时高频遗漏点
JS 如何批量读取已勾选的 checkbox？
不能只用 document.querySelector('input[type="checkbox"]')，那只能拿到第一个；要处理多选，得用集合操作。
- 获取所有同名 checkbox 的勾选值：
Array.from(document.querySelectorAll('input[name="hobby"]:checked')).map(cb => cb.value) - 监听变化时，事件源是具体那个 checkbox，不是整个组：
element.addEventListener('change', e => console.log(e.target.checked)) - 注意：
change事件在失去焦点或回车确认时才触发；如需实时响应，改用input事件（但 checkbox 的input行为在部分旧版 Safari 中不一致）
最常被忽略的是：服务端接收到 checkbox 数据时，可能收不到任何字段（因为未勾选就不提交），而不是收到 name=null 或 name=""。如果业务逻辑依赖“未勾选即关闭”，后端必须做字段存在性判断，不能只判空字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
