label的for属性必须严格匹配input的id才能点击生效；推荐用label包裹input避免id管理问题；单选组需name相同、value不同；须设checked并确保无障碍可访问。

label 的 for 属性必须严格匹配 input 的 id

不配对就点不了标签，这是最常见的失效原因。浏览器靠 for 和 id 建立关联，不是靠位置或 name。

错误写法：深色模式 —— 点击文字完全没反应。

正确做法是给每个 单独设唯一 id，再让 的 for 指向它：

<input type="radio" id="theme-light" name="theme" value="light"><label for="theme-light">浅色模式</label>

<input type="radio" id="theme-dark" name="theme" value="dark"><label for="theme-dark">深色模式</label>

用 label 包裹 input 是更稳妥的替代方案

当不想管理一堆 id 时，直接把 塞进 内部，语义和交互都自动生效，且无需 for。

这种写法兼容性极好，连 IE8 都支持，而且避免了 id 重复或拼写错误的问题：

<label>
  <input type="radio" name="size" value="s">
  小号
</label>

<label>
  <input type="radio" name="size" value="m">
  中号
</label>

注意：每个 只能包裹一个 ，否则行为不可控；name 必须一致才能构成单选组。

name 相同、value 不同是单选逻辑成立的前提

光有 label 不代表它们是一组可互斥选择的单选按钮 —— 浏览器只认 name 属性是否相同。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• name 不同 → 各自独立，可同时选中
• value 相同 → 提交时无法区分选了哪个，后端收不到有效值
• name 相同 + value 不同 → 才是合法单选组

示例中如果两个 radio 的 name="theme" 但都写 value="light"，那无论点哪个，提交的都是 theme=light，失去选择意义。

别忽略默认选中和无障碍访问

用户可能用键盘 Tab 导航，或依赖屏幕阅读器。确保至少一个 radio 有 checked 属性，否则初始状态为空，表单逻辑可能断裂。

同时，label 文本要准确描述选项含义，避免“选项1”“选项2”这类无意义文案。如果 label 里只有图标，必须加 aria-label 或隐藏文本：

<label>
  <input type="radio" name="lang" value="zh" checked><span aria-hidden="true">??</span>
  <span class="sr-only">中文</span>
</label>

那个 class="sr-only" 对应的 CSS 应设为视觉隐藏但保留可读性，否则屏幕阅读器会跳过。

真正容易被忽略的是：label 和 input 的绑定一旦出错，问题不报错、不警告，只是“点不动”，排查时得手动检查 DOM 结构里的 id 和 for 是否真的一致，大小写、空格、连字符一个都不能错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！