原生 checkbox 是语义化、可访问且表单集成的布尔控件，其状态切换依赖 :checked 伪类与 change 事件；用 button 模拟会丢失语义、无障碍支持和自动表单提交能力。
input[type="checkbox"] 本身不“提升”状态切换——它就是状态切换的原始载体。所谓“提升”，其实是用 CSS 和事件绑定把底层布尔值变化，映射成视觉反馈与业务逻辑响应。没这层映射，它只是个看不见的表单控件。
为什么不用 button + JS 模拟开关？
能用，但会丢三样东西：语义、可访问性、表单集成能力。原生 input[type="checkbox"] 天然携带 checked 属性，被屏幕阅读器识别为“切换控件”，支持空格键操作，还能自动参与 form 提交（比如配置页保存时）。用 button 手动维护 isOn = !isOn，就得自己补全这些链路，容易漏掉键盘焦点管理或 aria-checked 同步。
:checked 伪类是 CSS 驱动状态的关键
所有纯 CSS 开关效果都依赖这个伪类触发样式变更，不是靠 JS 改 class。常见错误包括：
- 写成
input:checked .slider（后代选择器）——实际需要相邻兄弟选择器input:checked + .slider，否则无法命中 label 后的轨道元素 - 忘记给
.slider和::before加transition，导致状态切换无动画，显得生硬 - 用
display: none隐藏 checkbox——这会让键盘用户无法聚焦，改用opacity: 0; position: absolute;才安全
JS 监听 change 而非 click
用户可能用空格键、语音指令或辅助设备触发状态变化，click 事件捕获不到。必须监听 change：
立即学习“前端免费学习笔记（深入）”；
const toggle = document.getElementById('toggle');
toggle.addEventListener('change', function() {
// this.checked 是真实、可信的状态来源
if (this.checked) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
});
别在事件里重新读取 DOM 属性或查 class 名——this.checked 就是最准的当前值。另外，避免在监听函数里直接操作内联样式（如 element.style.color），优先走 class 切换，方便 CSS 变量和主题控制。
真正难的是状态同步：当开关被 JS 主动设置（比如初始化读取 localStorage）时，要确保 UI、DOM 属性、业务变量三者一致。很多人只改了 el.checked = true，却忘了触发 change 事件，导致后续逻辑不执行——这时候得手动 el.dispatchEvent(new Event('change'))。
