可用的 checkbox 需同时设置 name、value、id 与 label for 关联；仅勾选的项提交，后端收不到未选项；js 应用 change 事件监听，批量操作用 Array.from 转 nodelist。
怎么写一个可用的 checkbox 元素
直接用 <input type="checkbox"> 就能渲染出复选框，但光有它没用——没 name 提交不了数据，没 value 传不出值，没 id + label 点击体验差。
常见错误现象：点击文字没反应、表单提交后后端收不到 checkbox 的值、多个 checkbox 提交时只拿到最后一个。
-
name必须设，且一组关联选项要用相同name（比如name="hobby"） -
value必须设，否则勾选后提交的是默认的"on"，不是你想要的语义值（如value="reading"） - 用
<label for="xxx"></label>包住文字，对应input的id="xxx"，才能点文字触发勾选 - 如果想默认选中，加
checked属性（不用checked="true"，布尔属性写存在即真）
checkbox 提交时值是怎么传递的
浏览器只把「被勾选」的 checkbox 发给服务端，未勾选的完全不发。这意味着后端永远收不到“未选中”状态——它不是 NULL 或 false，而是压根不存在这个字段。
使用场景：用户多选兴趣标签、权限开关组合、批量操作确认等。
立即学习“前端免费学习笔记（深入）”；
- 别依赖「没收到某 name」就认为它是 false；后端需预设默认值，或前端主动补
<input type="hidden" name="hobby" value="">占位（但注意：这会覆盖所有勾选项，慎用） - 同名多个 checkbox 提交后，服务端通常收到数组（如 PHP 的
$_POST['hobby'] = ['reading', 'coding']），但若只有一个被选中，有些框架仍返回字符串，要注意类型判断 - 用 JS 读取时，
input.checked是布尔值，input.value是字符串，别混淆
JS 怎么安全地监听和操作 checkbox
别用 onclick 直接绑在 input 上——它在 focus/键盘操作时不可靠；优先用 change 事件，它只在真实状态变更后触发。
容易踩的坑：click 事件可能在 checkbox 还没更新 checked 状态时就执行；用 querySelectorAll('input[type="checkbox"]') 拿到的是 NodeList，不是数组，不能直接用 map。
- 监听写法：
elem.addEventListener('change', () => { console.log(elem.checked); }) - 批量获取已勾选项：
Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value) - 全选/反选逻辑里，别直接改
elem.checked = true后再调dispatchEvent，应先设值再触发change，否则 React/Vue 等框架可能不同步 - 移动端点击区域小，建议用 CSS 把
label的padding加大，别只靠默认样式
checkbox 在不同浏览器里的兼容细节
基础功能全浏览器都支持，但样式和行为微差：safari 对 :checked 伪类动画支持弱；IE11 不支持 :focus-visible；部分安卓 webview 会忽略 label 的 for 关联。
性能影响几乎为零，但大量 checkbox（比如上千个）+ 实时 JS 监听，可能卡顿，这时该用事件委托。
- 自定义样式必用
appearance: none，然后配合::before/::after画图，别试图直接改原生外观 - 无障碍必须保留
id/for关联，且 label 文字要准确描述功能（比如“接收营销邮件”比“同意”好） - 如果用
display: none隐藏原生 checkbox 再用伪元素模拟，记得同步控制aria-checked属性，不然屏幕阅读器读不出来
事情说清了就结束