radio单选框靠name属性分组，同name值互斥，不同name值独立；ID和class不影响分组。JavaScript需用document.querySelector('input[name="xxx"]:checked')?.value获取选中值，动态生成时须确保每组name唯一。
radio单选框靠name分组，不是靠ID或class
HTML里<input type="radio">的分组逻辑非常简单：只要name属性值相同，就属于同一组，互斥选择；不同name值就是不同组，彼此完全独立。很多人误以为用id或class能控制分组，结果发现选了A组的选项，B组也自动取消了——那基本是两组radio意外用了同一个name。
实操要点：
-
name必须是合法的字符串（建议只用字母、数字、下划线），避免空格或特殊符号 - 同一组内每个
radio的value要不同，否则提交后无法区分选中了哪个 - 不要给不同组的radio设相同的
name，哪怕只是拼写差一个字母（比如gender和gander）
JavaScript里用document.querySelector按name取当前选中值
想分别获取每组的选中值，不能用document.getElementById——因为radio通常没有ID，或者ID不参与分组逻辑。正确方式是用name属性定位，再找其中被勾选的那个：
const gender = document.querySelector('input[name="gender"]:checked')?.value;
const level = document.querySelector('input[name="level"]:checked')?.value;
注意几点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
:checked伪类必须写在input[name="xxx"]后面，顺序不能反 - 加
?.value是为了防止没选中时返回null导致报错Cannot read property 'value' of null - 如果某组完全没选中，结果就是
undefined，业务代码里得自己判断是否允许空值
表单提交时，只有name和value生效，其他属性全忽略
当用<form></form>直接提交（或FormData收集），后端收到的只是name=value键值对。例如：
<input type="radio" name="theme" value="dark"> <input type="radio" name="theme" value="light">
用户选中light，提交后端就只收到theme=light。以下这些都不会进提交数据：
id="theme-light"class="option"data-desc="浅色模式"- 有没有
checked属性（只影响初始状态，不参与提交）
容易被忽略的坑：动态生成radio时name拼错或没同步更新
用JS动态添加radio（比如从API拉配置渲染选项），最容易出问题的是name写死或变量引用错误。例如：
items.forEach((item, i) => {
const radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'category'; // ← 这里写成固定字符串，但本意是每组不同
radio.value = item.id;
});
结果所有动态生成的radio都挤进同一组，互相干扰。正确做法是确保每组有唯一name，比如：
radio.name = `category_${sectionId}`;
另外，如果页面有多个相同逻辑的模块（如多套问卷），务必检查各模块的name前缀是否隔离，否则用户在一个模块选了，另一个模块同名的radio也会被取消。
