name属性决定单选分组互斥，必须完全一致（区分大小写、无空格）；value为提交值需具业务含义；label必须用id/for显式关联以保障可访问性。

name 属性决定分组互斥，写错就失效

radio 的“单选”行为完全由 name 控制：同名即一组，浏览器自动保证只允许选中一个。它不看 id、不看文字、不看位置，只比对 name 字符串是否**完全一致**（区分大小写、不可含空格或不可见字符）。

• 漏写 name → 该 radio 成为“孤儿”，无法与其他任何项互斥
• name="gender" 和 name="Gender" → 实际是两组，用户可同时选“男”和“女”
• name="user_type" 和 name="user-type" → 不等价，分组断裂
• 动态插入时只复制 value 或 id，忘了设 name → 新项不参与原有逻辑

value 是提交值，不是显示文本

表单提交或 FormData 收集时，后端收到的是 name=value 对，比如 theme=dark。如果所有 radio 的 value 都写成 "on" 或留空，后端根本无法区分用户选了哪一项。

• 未设 value 时默认为 "on"，极易导致多个选项提交相同值
• value 应具备业务含义：value="light"、value="dark"、value="auto"
• 显示文字必须用 <label></label> 包裹或关联，不能靠紧挨着的文本——那只是纯 HTML 文本，不响应点击，也不被读屏器识别

checked 和 required 都要慎用

checked 表示页面加载时默认选中，但同一组中只能有一个生效；required 强制用户选择，否则表单无法提交。两者看似简单，实际容易引发逻辑冲突。

DeepBI DHTML 页面生成器

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

下载

• 同一组多个 checked → 浏览器按 DOM 顺序取最后一个，前面的被忽略（不是报错，而是静默覆盖）
• required 加在 radio 组上，效果是“至少选一个”，但它只检查是否有 :checked，不校验 value 是否合法
• 若整组 radio 全部 disabled，required 失效（因为 disabled 元素不参与表单验证）
• JS 动态设置 checked = true 后，需确保其他同名项已设为 false，否则可能视觉与状态不一致

id + label 关联是可访问性刚需

单纯写 <input type="radio" name="size" value="m"> 中号，用户只能点到极小的圆圈区域。移动端、触控屏、低视力用户几乎无法操作。必须用 id 和 for 显式绑定。

立即学习“前端免费学习笔记（深入）”；

• id 值必须唯一，且与 <label for="xxx"></label> 中的 for 值完全一致
• 推荐写法：<input type="radio" name="size" id="size-m" value="m"><label for="size-m">中号</label>
• 不绑定时，click 事件监听可能失效（尤其在 Shadow DOM 或某些框架封装下）
• 无障碍工具（如 NVDA、VoiceOver）依赖该结构朗读选项，缺失则语义断裂

真正容易被忽略的，是 name 的一致性贯穿整个生命周期——从手写 HTML 到 JS 动态渲染，再到 Vue/React 的 v-for / map 渲染，只要 name 字符串出现一次拼写偏差，单选逻辑就当场瓦解，且很难通过肉眼发现。