HTML单选按钮组动态添加选项保持互斥-html教程-PHP中文网

所有同组单选按钮的name属性必须严格相等（区分大小写、空格、引号），动态添加时需确保name一致、使用querySelectorAll获取实时节点、手动同步checked状态，框架中应通过数据驱动而非直接操作DOM。

html单选按钮组动态添加选项保持互斥

单选按钮组 name 属性必须完全一致

HTML 单选按钮（）的互斥行为完全依赖于 name 属性值是否相同。动态添加新选项时，只要漏写、拼错或前后不一致，新按钮就无法与其他项互斥——它会变成独立可选的“孤例”。

常见错误现象：Uncaught TypeError: Cannot set property 'checked' of null（试图操作未正确挂载的节点），或更隐蔽的：新按钮能被选中，但旧按钮不自动取消，反之亦然。

所有同组 radio 的 name 必须是**严格相等的字符串**（区分大小写、空格、引号）
动态插入前务必确认目标容器已存在，且插入的是完整带 name 和 value 的元素
避免用 innerHTML += 追加，这会重绘整个 innerHTML，导致已选状态丢失；应使用 appendChild() 或 insertAdjacentHTML("beforeend", ...)

动态添加后需手动触发 checked 状态同步（仅限 JS 控制场景）

浏览器原生机制只保证同一 name 下的 radio 互斥，但不会主动“通知”已有选中项去取消自己。如果添加前已有某项被 JS 设为 checked = true，而新项也设了 checked = true，结果是两个都保持选中——这是合法 DOM 状态，但不符合业务逻辑。

使用场景：表单初始化后，后端返回新选项并要求默认选中最新一项，同时取消之前所有选中。

添加新 radio 后，先遍历同 name 的所有 radio，统一设 elem.checked = false
再对目标新项设 newRadio.checked = true
若需兼容旧版 IE，避免直接赋值 checked 属性，改用 newRadio.setAttribute("checked", "checked") 并清除其他项的该属性

用 document.querySelectorAll 避免 getElementsByName 的兼容陷阱

document.getElementsByName() 返回的是 HTMLCollection，在某些旧浏览器中动态添加后可能不实时更新；而 document.querySelectorAll('input[name="xxx"]') 每次调用都返回全新 NodeList，更可靠。

DeepBI DHTML 页面生成器

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

下载

性能影响极小，但能避开因集合缓存导致的“找不到新添加项”问题。

推荐写法：const radios = document.querySelectorAll('input[name="gender"]');
不要依赖 getElementsByName("gender")[0] 这类硬索引，尤其当元素顺序可能变化时
注意：CSS 选择器中的 name 值含特殊字符（如点、中括号）需转义，例如 name="user.option" 要写成 input[name="user\.option"]

Vue/React 等框架中不要手动操作 DOM radio

在响应式框架里，直接用 JS 插入并设置 checked，大概率会被框架下一次 re-render 覆盖，造成状态不一致或闪烁。

正确做法是更新数据源（如数组），让框架驱动渲染：

Vue：向 v-for 绑定的数组 options push 新对象，确保每个对象含 value 和唯一 id，并用 v-model 绑定到同一个 data 字段
React：用 useState 管理选项列表和当前选中值，map 渲染 radio，onChange 更新 state
切忌在框架组件内混用 document.createElement + appendChild 添加 radio