使用原生 `` 配合 `
在 Web 开发中，“切换按钮”（toggle button）常被误解为必须用 <button> 元素配合 JavaScript 手动维护状态。但事实是：HTML 原生就提供了更简洁、更健壮、更符合无障碍标准的解决方案——<input type="checkbox">。
<input type="checkbox"> 天然支持双态（checked/unchecked），其语义明确表示“开启/关闭”，且浏览器默认为其 :checked 状态提供视觉反馈（例如在部分浏览器中，当与 <label> 关联后点击时，会呈现类似按钮按下的焦点或激活态）。更重要的是：它自动满足 WCAG 2.1 对切换控件的要求——无需手动添加 aria-pressed，也不需额外声明角色（role="switch" 或 role="button"），因为 <input type="checkbox"> 在可访问性树中已被正确识别为可切换控件。
✅ 最简实现（零 CSS，纯 HTML）：
<input type="checkbox" id="my-toggle"> <label for="my-toggle">切换我</label>
该代码已具备完整功能：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 点击 <label> 即切换复选框状态；
- 浏览器自动处理焦点、键盘操作（空格键切换）和屏幕阅读器播报；
- <label> 的 for 属性与 id 关联，确保语义绑定；
- 无需任何 JavaScript —— 状态由表单控件自身维护，天然可靠。
? 若希望它视觉上更像按钮（如圆角、背景色、悬停效果），推荐采用“隐藏原生控件 + 样式化标签”的模式（即 CSS reset + label 伪元素），但注意：这仍不需你手动定义“按下态颜色”。现代 CSS 框架（如 Bootstrap）已封装此模式：
<!-- 使用 Bootstrap 的 btn-check（仅需引入 CSS，无 JS 依赖） --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet"> <input type="checkbox" id="my-toggle" class="btn-check"> <label class="btn btn-primary" for="my-toggle">切换我</label>
在此方案中，.btn-check 会隐藏原生复选框，而 .btn 类为 <label> 提供完整的按钮样式体系（包括 :checked 下的 background-color、border-color 和阴影变化），这些样式完全复用浏览器默认按钮的视觉逻辑，真正实现了“继承默认按下态”。
⚠️ 注意事项：
- 避免滥用 <button> + aria-pressed：虽然技术上可行，但它绕过了表单语义，需手动处理键盘事件（Enter/Space）、焦点管理、初始状态同步，且无法被 <form> 自动收集值；
- 永远关联 <label>：不使用 for/id 或包裹结构的 label 将导致可访问性失败（屏幕阅读器无法将文本与控件关联）；
- 不要用 display: none 隐藏 checkbox：应使用 position: absolute; opacity: 0; 或 clip: rect(0,0,0,0) 等无障碍友好的隐藏方式（Bootstrap 的 .btn-check 已内置此处理）；
- 如需获取状态，直接读取 input.checked：比解析 aria-pressed 字符串更安全、高效。
总结：真正的“最简切换按钮”，不是写最少的 JavaScript，而是选用最贴合语义的原生元素。<input type="checkbox"> + <label> 组合以零 CSS、零 JS、零 ARIA 的代价，交付了可访问、可维护、跨浏览器一致的切换体验——这才是现代 HTML 开发的极简主义精髓。
