同一页面多个radio组必须用不同name值；浏览器仅按name字符串字面量匹配实现互斥，大小写、空格、连字符/下划线差异均导致分属不同组，命名须统一小写+连字符、禁用中文与特殊符号，并确保前后端一致。
同一页面多个radio组必须用不同name值
浏览器不识别“组名”概念，只按name字符串做字面量匹配。两个radio能互斥，唯一条件是它们的name属性值完全一致（包括大小写、空格、连字符/下划线）；反之，只要name不同，哪怕语义高度相关，也属于独立组。
比如用户偏好设置页有「主题模式」和「通知方式」两组选项，不能都用name="setting"，否则点一个就清掉另一个——这不是bug，是浏览器按规范执行互斥逻辑的结果。
-
name="theme"和name="notification"→ 安全并存 -
name="theme"和name="Theme"→ 实际是两组，但大小写不一致易被忽略 -
name="user_role"和name="user-role"→ 短横线 vs 下划线，分属不同组 -
name="plan"和name="plan "→ 末尾空格导致第二项自成一组
name命名要兼顾可读性与机器严格性
人看觉得“差不多”，浏览器判定就是“完全不同”。所以命名策略得向解析器低头，而不是向开发直觉让步。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 统一用小写字母 + 连字符（
theme-mode），避免驼峰（themeMode）或下划线（theme_mode），减少框架模板中意外空格或转义风险 - 禁用中文、空格、特殊符号：
name="用户类型"或name="payment method"会导致HTML解析失败或提交异常 - 后端API字段名和前端
name应严格对齐，比如后端接收delivery_option，前端就不能写成deliveryOption
动态渲染时name容易被悄悄破坏
Vue 的 v-for、React 的 map()、或 JS 拼接字符串插入 DOM 时，name 值常因变量拼错、空格残留、条件分支遗漏而失效。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中每个 radio 元素的最终
name属性值，不要只信组件里写的变量名 - 用
document.querySelectorAll('input[type="radio"]')打印所有 radio，再按name分组统计，比肉眼数快且准 - JS 动态创建时显式赋值：
el.name = "theme-mode"，别依赖el.cloneNode(true)—— clone 可能漏掉 name 或带旧值 - Vue 中确保绑定的是常量字符串：
:name="'theme-mode'"，而非:name="item.name"（除非 item.name 确保稳定）
表单提交和JS读取都依赖name分组逻辑
不是只有视觉互斥靠name，整个数据链路——从用户点击、JS 获取、FormData 构造、到浏览器原生 submit——全靠name串起来。
- 没选任何 radio 时，该
name键根本不会出现在 FormData 或 URL 查询参数中（和 checkbox 行为不同） - JS 获取选中值必须写
document.querySelector('input[name="theme-mode"]:checked')?.value，漏掉:checked就可能读到 null - 服务端收到数据后，必须校验该
name是否存在、是否在预设白名单内，不能假设“前端传了就一定合法”
name 改歪了——比如复制代码时忘了改第二个组的 name，或者国际化时加了 locale 前缀却没同步后端约定。这种错误不报错，只静默失效。 
