正确声明 checkbox 必须写 type="checkbox" 且不可省略 name 属性，否则提交时不会发送；value 建议显式指定，默认为 "on"；多个同名 checkbox 勾选后以重复键形式提交（如 interests=js&interests=css），未勾选的不参与提交。
如何用 input 标签正确声明 checkbox
必须写 type="checkbox"，且不能省略 name 属性——否则表单提交时这个选项根本不会被发送。浏览器只把勾选状态为 checked 的 input 加入提交数据，但前提是它有 name。
常见错误是只写 <input type="checkbox">，结果后端收不到任何值。正确写法示例：
<input type="checkbox" name="feature" value="dark_mode">
注意：value 值决定提交时该选项携带的具体字符串，默认是 "on"，但建议显式指定，避免歧义。
多个 checkbox 共享 name 时的数据提交行为
当多个 input 使用相同 name（比如 name="interests"），且都设了不同 value，勾选多个后，表单提交会以数组形式传递这些值（具体取决于后端框架解析逻辑）。
立即学习“前端免费学习笔记（深入）”；
例如：
<input type="checkbox" name="interests" value="js"> JavaScript<br><input type="checkbox" name="interests" value="css"> CSS<br><input type="checkbox" name="interests" value="html"> HTML
若用户勾选了前两个，提交的字段就是 interests=js&interests=css。多数现代后端（如 Express、Django、Spring）能自动聚合成列表，但原始 URLSearchParams 或 FormData 里仍是重复键。
关键点：
- 不勾选的 checkbox 完全不参与提交，不会传
interests=或空值 - 如果需要“未勾选时也传默认值”，得靠 JS 补充隐藏域或服务端约定兜底
- 不要依赖 checkbox 的
checked属性判断初始状态——它只控制默认是否勾选，运行时状态要用element.checked读取
用 JS 检测和操作 checkbox 状态的常见误区
直接读 element.getAttribute('checked') 是错的：它返回的是 HTML 属性是否存在（可能为 "checked" 或 null），而非当前真实勾选状态。
正确方式永远是读写 element.checked 这个布尔属性：
const cb = document.querySelector('input[value="dark_mode"]');<br>console.log(cb.checked); // true / false<br>cb.checked = true; // ✅ 设为勾选<br>cb.checked = false; // ✅ 设为取消
监听变化要用 change 事件，不是 click——因为用户可能用空格键切换，change 才保证值已确定：
cb.addEventListener('change', () => {<br> console.log('新状态：', cb.checked);<br>});
另外，别在循环中用 for...in 遍历 checkbox 集合——用 forEach 或传统 for 更稳妥，避免原型链干扰。
样式定制 checkbox 时最容易忽略的兼容性问题
原生 checkbox 不支持直接设置宽高或背景色，想自定义外观，常规做法是隐藏原生元素，用 label + 伪元素模拟。但要注意：
必须保留 for 属性或把 input 包在 label 内，否则点击文字无法触发勾选；
CSS 中用 input[type="checkbox"] { display: none; } 是安全的，但某些旧版 iOS Safari 对 appearance: none 支持不稳定，别单独依赖它；
无障碍访问（a11y）不能丢：即使视觉上隐藏了原生控件，也要确保屏幕阅读器仍能识别其 name 和状态，推荐用 aria-label 或关联 label 元素。
最后提醒：所有自定义样式方案，都要在 JS 中继续通过 element.checked 控制逻辑，而不是操作伪元素类名——状态和 UI 必须同步，否则交互会错乱。
