跨表单 radio 共用 name 会导致全局互斥和取值错乱，必须通过语义化命名（如 formA_status）或限定作用域查询（如 formEl.querySelector）来隔离。
radio 跨表单时 name 冲突会导致取值错乱
HTML 规范中，input[type="radio"] 的互斥行为只在「同一表单内」或「无表单上下文」时按 name 分组生效；但跨 <form></form> 标签时，浏览器仍会全局按 name 值强制分组——哪怕它们物理上属于不同 <form></form>。这意味着：两个独立表单里各放一个 name="status" 的 radio，用户在任一表单中选中后，另一个表单同名 radio 会自动取消选中。
这不是 bug，是规范行为。常见错误现象包括：
- 提交表单 A 后，表单 B 的 radio 状态意外清空
- 用
document.querySelector('input[name="status"]:checked')总是只拿到一个结果，即使你认为它们“不相关” - 调试时发现
querySelectorAll('input[name="status"]')返回了跨表单的全部节点
解决办法只有两个：
- 不同表单必须使用**语义隔离的 name**，例如
formA_status和formB_status，而非共用status - 若必须复用逻辑名（如统一后端字段），则需用 JS 主动隔离：给每个表单加唯一 class 或 data 属性，取值时限定作用域，例如
formAEl.querySelector('input[name="status"]:checked')?.value
FormData 构造时 radio 跨表单不会自动合并
FormData 实例只收集它所属 <form></form> 内部的控件值，不会跨表单抓取。但开发者常误以为「只要 name 相同，FormData 就能聚合」，结果发现提交数据缺失。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
const fd = new FormData(); // 空构造，没传 form 元素
fd.append('status', document.querySelector('input[name="status"]:checked')?.value);
问题在于：document.querySelector 是全局查找，可能拿到其他表单里的 radio，且无法反映当前目标表单的真实状态。更糟的是，如果多个表单都有 name="status"，而你只 append 一次，就漏掉了其他表单的数据。
正确做法是绑定到具体表单元素：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 显式传入 form 元素：
new FormData(formAEl)，它会自动过滤出该 form 下所有有效控件，radio 只提交被选中的那一项 - 手动收集时，务必限定范围：
Array.from(formAEl.querySelectorAll('input[type="radio"][name="status"]')).find(r => r.checked)?.value - 避免用全局
document查询，尤其在 SPA 或多表单页面中
JS 动态操作 radio 时跨表单 name 复用极易引发竞态
当通过 JS 插入、克隆或批量设置 radio 时，若直接复制节点或模板字符串，很容易把 name 属性原样带入不同表单，造成隐性分组。这种问题在 Vue/React 中渲染循环里尤其隐蔽——比如 v-for 渲染的 radio 组，若 name 绑定的是一个全局变量而非 per-form 计算属性，就会跨表单污染。
检查和修复建议：
- 用
console.log(document.querySelectorAll('input[name="status"]'))快速确认是否意外拉取了其他表单的 radio - 动态创建时，显式赋值
el.name = `formA_${baseName}`，不要依赖 innerHTML 或 cloneNode(true) - 在 React 中，确保
name是由父组件传入的稳定字符串，而非从 context 或 store 读取的共享字段 - 测试时主动切换不同表单的 radio，观察彼此状态是否联动——联动即说明分组失控
服务端接收时 name 冲突会让参数覆盖不可预测
浏览器提交时，每个 name 最多只发送一个值（radio 组内仅选中项），但若多个表单共用同一 name，且都设置了 method="get" 或用 FormData 手动拼接，就可能出现参数重复或覆盖。
例如两个表单都含 name="theme"，用户在表单 A 选了 dark，表单 B 选了 light，然后你用 JS 合并成一个对象再发请求：
const data = {
theme: formA.querySelector('input[name="theme"]:checked')?.value,
theme: formB.querySelector('input[name="theme"]:checked')?.value // 后者直接覆盖前者
};
更危险的是 GET 请求拼 URL：?theme=dark&theme=light，不同后端解析策略不同（PHP 取最后一个，Node 默认只收第一个），结果不可控。
根本解法很朴素：
- 前后端约定 name 前缀，如
profile_theme和settings_theme - 提交前用
URLSearchParams或FormData分别构造，再合并为嵌套结构（如{ profile: { theme: 'dark' }, settings: { theme: 'light' } }） - 永远不要假设「相同 name 就代表同一业务含义」——name 是传输键，不是语义标识
跨表单 radio 最容易被忽略的点，是把它当成纯 UI 控件，忘了它底层仍是靠全局 name 字符串做状态仲裁的 DOM 原语。一旦 name 拉平，行为就拉平，没有商量余地。
