复选框开关效果本质是伪装原生checkbox：通过CSS隐藏input并用label和伪元素模拟滑块，确保视觉状态与checked严格同步，且支持键盘操作和可访问性。
复选框加开关效果本质是伪装 <input type="checkbox">
浏览器原生复选框没法直接变开关，所以得用 CSS 隐藏真实 <input>，再用 <label> 和伪元素模拟滑动轨道和滑块。关键不是“画个开关”，而是让这个视觉开关和底层 checkbox 的 checked 状态严格同步——否则点击没反应、JS 读不到状态、表单提交出错。
- 必须把
<input>放在<label>内部，或用for属性绑定id，否则点击开关区域不会触发 checkbox 切换 - 隐藏原生控件不能只靠
display: none或visibility: hidden，得用position: absolute; opacity: 0; pointer-events: none;，否则屏幕阅读器会跳过它 - 开关的“开/关”文字或颜色变化，要靠
input:checked + .switch-track::after这类相邻兄弟选择器驱动，别漏写冒号和空格
纯 CSS 实现开关样式，不依赖 JS
下面这段代码能直接复制进 HTML 文件运行，开关滑块会随 checkbox 状态自动移动，且支持键盘 Tab + Space 操作：
<label class="switch">
<input type="checkbox">
<span class="switch-track"></span>
</label>
<style>
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 26px;
}
.switch input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.switch-track {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 26px;
transition: 0.2s;
}
.switch-track::before {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 22px;
height: 22px;
background-color: white;
border-radius: 50%;
transition: 0.2s;
}
input:checked + .switch-track {
background-color: #4CAF50;
}
input:checked + .switch-track::before {
transform: translateX(26px);
}
</style>
注意：transform: translateX(26px) 的数值 = 轨道宽度 − 滑块宽度，这里 52 − 22 = 30，但实际要减去左右边距（2px × 2），所以是 26px。算错会导致滑块卡在边缘。
用 JS 监听状态变化时，别监听 click，要监听 change
用户可能用空格键、语音控制或辅助设备操作，这些不会触发 click，但一定会触发 change。监听错事件会导致逻辑断连。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
element.addEventListener('click', ...)—— 键盘操作无效 - 正确写法：
element.addEventListener('change', () => { console.log(element.checked); }) - 如果要用 jQuery，对应的是
.on('change', ...)，不是.on('click', ...)
移动端点击区域太小，必须扩大可点范围
默认开关只有 52×26px，手指点不准。不能只给 .switch 加 padding，那会撑大整个容器影响布局。正确做法是扩大 label 的点击热区：
- 给
<label>加padding: 8px，同时用box-sizing: border-box保证尺寸不变 - 或者更稳妥：用
::before在 label 上叠加一层透明点击层，content: ""; position: absolute; inset: -8px; - 别忘了加
cursor: pointer，不然用户看不出这是可点的
开关动画快慢、颜色、尺寸都可以调，但状态同步和可访问性这两条线不能破——否则看起来像开关，用起来还是个 checkbox。
