name决定单选逻辑，id仅用于定位和关联；name缺失或不一致会导致radio无法互斥，id缺失则label失效；表单提交只认name，后端接收也依赖name值。

name 决定单选逻辑，id 只用于定位和关联

radio 能不能“单选”，只看 name；能不能被 label 点击、被 JS 精准选中，主要靠 id。两者职责完全不同，混用或漏写都会出问题。

浏览器对 name 的处理是强制性的：所有 name 值完全一致（大小写、空格、连字符全敏感）的 input[type="radio"] 自动组成一组，同一时间仅允许一个被选中。而 id 不参与任何表单语义，它只是 DOM 中的唯一标识符。

• name 缺失 → radio 成为“孤儿”，永远无法与其他 radio 互斥
• id 缺失 → label 的 for 属性失效，用户无法点击文字触发选择
• name 拼错（如 "gender" vs "Gender"）→ 表面同组，实际分裂成两组，可多选
• id 重复 → 违反 HTML 规范，document.getElementById() 只返回第一个匹配元素

表单提交和后端接收只认 name，不认 id

当 form 提交或构造 FormData 时，浏览器只收集带 name 的控件，且对 radio 组只提交被选中项的 name=value 对。没设 name 的 radio，哪怕有 id，也不会出现在请求数据里。

后端（如 PHP 的 $_POST['theme']、Node.js 的 req.body.theme）拿到的值，完全取决于前端 radio 的 name 和选中项的 value。哪怕你把 id 设得再规范，只要 name 不一致或为空，后端就收不到这个字段。

• 没选中任何 radio → 整个 name 键不会出现在提交数据中（和 checkbox 不同）
• 多个 radio 共享同一 name，但 value 相同（如都为 "on"）→ 后端无法区分用户选了哪一项
• 动态插入 radio 时，JS 必须显式设置 el.name = "theme"，复制节点容易漏掉 name

JS 和 CSS 选择器对 id 和 name 的使用差异

id 是 JS 和 CSS 最直接的锚点：document.getElementById("man") 或 #man 选择器能精准命中单个元素。而 name 在 JS 中只能通过 document.getElementsByName("theme")（返回 HTMLCollection）或更可靠的 document.querySelectorAll('input[name="theme"]') 获取集合。

DeepBI DHTML 页面生成器

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

下载

用 querySelector 查当前选中值时，必须写全属性选择器：document.querySelector('input[name="theme"]:checked')?.value。只靠 id 无法判断它属于哪组 radio，也无法批量操作整组。

• getElementsByName 在某些旧环境（如 IE8）中对数组方法（.some()）支持不好，优先用 querySelectorAll
• CSS 无法用 name 做样式控制（input[name="theme"] 是合法但低效的选择器，不推荐用于高频样式）
• label[for="man"] 和 input#man 必须严格配对，for 属性值必须与 id 字符串完全一致

常见错误现场：为什么看起来能同时选两个？

最典型的症状是页面上放了“男/女”两个 radio，用户点了男，再点女，结果两个都保持勾选状态——这不是 UI bug，而是 name 分组失效的明确信号。

打开 DevTools 检查每个 radio 的实际属性，大概率会发现：

• 一个写的是 name="sex"，另一个是 name="Sex"（大小写不一致）
• 一个 name="user_type"，另一个 name="user-type"（下划线 vs 连字符）
• 模板渲染时变量拼错：name={userOption} 实际输出为 name="level "（末尾多空格）
• 手动复制代码时漏掉了 name 属性，只留了 id 和 value

这种问题在 Vue/React 动态渲染中尤其隐蔽：name 看似绑定了同一个变量，但变量值本身可能含不可见字符或条件分支导致取值为空。最稳的验证方式是直接在 Elements 面板里肉眼核对每个 radio 的 name 属性原始字符串。

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