checkbox默认选中靠checked布尔属性，写上即生效；提交数据依赖value属性，未设置则默认为"on"；JS检测用element.checked而非getAttribute，监听change事件；自定义样式需确保原生input可交互。
怎么让<input type="checkbox">默认选中
靠 checked 属性，不是 value，也不是 JS 赋值后才生效。HTML 渲染时就看有没有这个布尔属性。
-
checked是布尔属性：写上就真，不写就是假，不用写checked="true"或checked=""（虽然后者也行，但冗余） - 服务端渲染或模板里动态加
checked，注意别漏空格、别拼错（比如写成cheched） - JS 动态控制用
element.checked = true，别用setAttribute('checked', '')—— 后者只影响初始状态，且在某些旧浏览器里行为不一致
为什么checkbox提交时没数据或总是on
因为没设 value。表单提交时，只有勾选的 checkbox 才会发数据，发的是它的 value 值；没设 value 就默认发 "on" —— 这不是 bug，是规范。
- 后端收到
on，大概率是前端忘了写value，比如：<input type="checkbox" name="agree"> - 正确写法必须带
value：<input type="checkbox" name="notify" value="email"> - 多个同名 checkbox（如多选兴趣）：每个都要有不同
value，否则后端收不到区分依据
怎么用 JS 检测checkbox是否被勾选
别读 getAttribute('checked')，它返回的是 HTML 属性是否存在，不是实时状态。要读 .checked 这个 DOM 属性。
-
element.checked返回布尔值，准确反映当前勾选状态 - 监听变化用
change事件，不是click（后者在键盘操作、辅助工具下可能不触发） - 批量操作时，别用
querySelectorAll('input[type="checkbox"]')后逐个设.checked = false，改用form.reset()更可靠（前提是它们在同一个<form>里）
样式自定义时checkbox点击没反应
常见于用 label + ::before/::after 隐藏原生控件再画新样式。问题往往出在 label 没正确绑定或事件被阻止。
立即学习“前端免费学习笔记（深入）”；
- 确保
<label>包住<input>，或者用for="id"和id匹配 —— 否则点击文字不会触发 checkbox - 隐藏原生控件别用
display: none或visibility: hidden，要用position: absolute; opacity: 0; pointer-events: none;，否则 label 绑定失效 - 自定义区域加了
preventDefault()却没手动 toggle.checked，就会点不动
value 和 checked 混为一谈，或者样式覆盖后忘了保留下层 input 的可交互性。这两处一错，后端收不到数据、用户点不生效，排查起来反而比逻辑代码更费时间。 
