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 属性。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• element.checked 返回布尔值，准确反映当前勾选状态
• 监听变化用 change 事件，不是 click（后者在键盘操作、辅助工具下可能不触发）
• 批量操作时，别用 querySelectorAll('input[type="checkbox"]') 后逐个设 .checked = false，改用 form.reset() 更可靠（前提是它们在同一个 <form></form> 里）

样式自定义时checkbox点击没反应

常见于用 label + ::before/::after 隐藏原生控件再画新样式。问题往往出在 label 没正确绑定或事件被阻止。

立即学习“前端免费学习笔记（深入）”；

• 确保 <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 的可交互性。这两处一错，后端收不到数据、用户点不生效，排查起来反而比逻辑代码更费时间。