应使用配合关闭推荐，未勾选时不提交字段，后端需将字段缺失视为默认关闭推荐。
HTML里怎么加一个“关闭推荐”的复选框
直接用 <input type="checkbox">，别套多余标签，也别用 <div> 模拟。浏览器原生复选框自带可访问性、键盘支持和表单序列化能力，手写模拟反而掉坑。
<p>常见错误是给它加 <code>role="switch" 或用 CSS 画个“开关”样式——这会让屏幕阅读器误读、Tab 键跳过、提交时拿不到值。
- 必须带
name属性，否则表单提交时该字段不会被发送 - 建议加上
id并配<label for="xxx"></label>，点击文字也能切换状态 - 默认不勾选就别写
checked；要默认关闭推荐，就别加这个属性
怎么让后端知道用户关了推荐
关键不是前端“显示开关”，而是表单提交时后端能收到明确信号。复选框的特殊行为是：**未勾选时不发数据，勾选时发 name=value（value 默认为 "on"）**。
所以后端不能靠“有没有这个字段”来判断“是否开启推荐”，而应设计成：字段存在 = 用户主动开启推荐，字段缺失 = 默认关闭推荐（或按用户偏好兜底）。别反过来理解。
立即学习“前端免费学习笔记（深入）”；
- 如果后端需要更语义化的值（比如
recommendation_enabled=true），就显式设value="true" - 避免用
value="1"或"0"——字符串和数字混用容易在弱类型语言里出 bug - 不要依赖 JS 动态改
name来“隐藏”字段，这会破坏表单一致性
为什么不用 type="hidden" 配合按钮切换
有人想用隐藏域存状态、再用按钮控制显式开关，这是典型过度设计。既增加 DOM 复杂度，又让表单逻辑分散，还可能因 JS 失效导致状态不同步。
原生复选框天然支持「提交即状态」，不需要额外同步逻辑。唯一要注意的是：如果页面有 JS 初始化状态（比如从 localStorage 恢复），记得同步设置 input.checked，而不是只改 UI。
- JS 初始化时漏掉
el.checked = value，会导致界面对、但提交错 - 用
el.setAttribute('checked', '')是错的，应该用.checked = true/false - 不要监听
click去手动 toggle hidden 字段，复选框自己会处理
移动端点击区域太小怎么办
原生复选框默认点击区窄，尤其在手机上容易点歪。解决方法不是重写控件，而是用 CSS 扩展可点击区域：
给 <label></label> 加 display: block 和足够内边距，或者用 ::before 伪元素撑开热区。注意别用 transform: scale() 放大 checkbox 本身——会模糊、影响对齐、且不增加实际点击面积。
- 确保
label的for指向正确的input id，否则扩展无效 - 避免给
input设opacity: 0后用兄弟选择器控制伪元素——IE 不支持，且可访问性退化 - 测试时真机点几次，确认焦点、语音反馈、缩放模式下都正常
