input[type="radio"]不能用作开关，因其不支持单元素开/关切换、无法反选、表单提交冗余、键盘与无障碍支持差；开关应使用input[type="checkbox"]并正确隐藏与样式化。
为什么不能用 input[type="radio"] 做开关
单选框（input[type="radio"]）天生不支持“开/关”二态切换——它必须和其他同名 radio 组成互斥组，选中一个，其他自动取消；没有单独“反选”能力。你点一次选中，再点一次，它不会变回未选中，而是保持选中。这和开关（toggle）的行为本质冲突。
常见错误是把两个 radio（比如“开”和“关”）当成一个开关用，结果导致：表单提交多出冗余字段、状态无法单点切换、键盘空格键操作失效、屏幕阅读器播报为“单选组”而非“开关控件”。
- 浏览器对
radio的 UA 样式不提供:checked之外的伪类驱动动画能力 - 无法用纯 CSS 实现滑块左右平移（因为没有单一元素承载“未选中→选中→未选中”状态循环）
-
change事件只在从“未选中→选中”时触发，反向无响应
input[type="checkbox"] 才是开关的事实标准
所有可访问、可提交、可键盘操作的开关，底层都必须用 input[type="checkbox"]。它的 :checked 状态天然支持 toggle 行为，且浏览器原生支持空格键切换、tab 导航、aria-checked 自动同步。
正确结构是：<label><input type="checkbox"></label> 或 <input type="checkbox" id="x"><label for="x"></label>。前者更简洁，后者便于分离样式作用域。
- 隐藏原生控件必须用
display: none，不是opacity: 0或visibility: hidden——否则焦点或语义会出问题 - 伪元素（
::before轨道、::after滑块）必须用position: absolute定位，避免影响父容器布局流 - 滑块位移用
transform: translateX()，计算值推荐calc(100% - 20px)（假设滑块宽 20px），而不是固定像素，否则缩放或响应式下错位
用 radio 强行模拟开关的典型翻车点
有人用两个 radio + JS 监听 change 并手动反写状态，表面看似能“切换”，但实际埋了三个硬伤：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 表单序列化时，该字段总有一个值（哪怕你“关”了，也提交了
off=on这类无效值） - 键盘操作下，
tab进入后按空格，只会选中当前项，无法取消——用户必须用arrow切换到另一个再按空格，体验断裂 - 屏幕阅读器读作“选项：开，已选中”“选项：关，未选中”，而不是“通知开关，已启用”，语义丢失
这类实现一旦接入无障碍测试工具（如 axe 或 WAVE），基本都会报 ARIA role not appropriate 或 missing name 错误。
真正需要单选语义时怎么办
如果业务逻辑确实是“三态选择”（比如：启用 / 禁用 / 继承），那它就不是开关，而是单选组。此时应明确使用 input[type="radio"]，并配以 aria-labelledby 和 role="radiogroup"，文案写清楚每个选项含义。
不要为了视觉像开关，就把单选组强行做成滑块样式——滑块暗示二元 toggle，而单选组是离散选项。用户预期和交互反馈会严重错配。
最易被忽略的一点：开关的视觉反馈必须和 checked 属性 1:1 同步。任何靠 JS 手动改 class 或 style 来“模拟”状态的做法，都会在 SSR、快照、表单重置或焦点管理时出问题。真实状态永远只来自 input 元素自身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
