JavaScript动态添加radio需确保新元素与原组name属性完全一致，否则无法互斥；必须配套label并用for关联id，推荐事件委托监听change，IE11需手动清理选中状态。
用 JavaScript 动态插入 <input type="radio"> 元素
直接往已有单选按钮组的容器里追加新的 <input> 是可行的，但关键在于：新选项必须和原组共享相同的 name 属性值，否则浏览器不会将其识别为同一组。常见错误是漏设 name 或拼写不一致（比如大小写、空格、下划线差异），导致点击后无法互斥。
实操建议：
- 先确认原始单选组的
name值（例如"gender"），所有动态添加项必须严格复用该字符串 - 用
document.createElement("input")创建元素，再依次设置type、name、value、id（可选）等属性 - 务必同时创建配套的
<label>并用for属性关联新id，否则可访问性受损且点击体验差 - 推荐用
appendChild()或insertAdjacentElement()插入到目标容器末尾，避免误删已有节点
name 不一致导致“看似单选实则多选”的问题
这是最隐蔽也最常被忽略的问题。浏览器只认 name 相同才做单选逻辑，哪怕 DOM 结构套在同一个 <div> 里也没用。比如原始组是 name="plan"，你动态加了一个 name="Plan"（首字母大写），那它就自成一组，和其他选项完全无关。
验证方法：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 打开开发者工具，检查新元素的
name属性是否与原始项完全一致（区分大小写、无多余空格） - 手动点击新选项，观察其他同名选项是否自动取消选中；若没有，说明
name不匹配 - 注意框架或模板引擎可能自动加前缀（如 Vue 的
v-for生成时拼错），需检查渲染后的实际 HTML
动态添加后如何获取当前选中值
新增选项不影响原有获取逻辑，仍用 document.querySelector('input[name="xxx"]:checked') 即可，前提是 name 统一。但要注意：如果页面加载时没有默认选中项，且用户尚未点击过任何选项，这个查询会返回 null，直接取 .value 会报 Cannot read property 'value' of null 错误。
安全写法示例：
const selected = document.querySelector('input[name="category"]:checked');
const value = selected ? selected.value : '';
另外，若需监听后续新增选项的点击，不要给每个新 input 单独绑定 change 事件，而是用事件委托——在父容器上监听，再判断 event.target 是否匹配 input[type="radio"][name="xxx"]。
IE11 及更老浏览器对动态 radio 的兼容细节
IE11 能正确处理动态添加的 radio，但有两个硬伤：一是不能用 setAttribute("checked", true) 来默认选中新项（得用 elem.checked = true）；二是若新增项的 name 和现有组相同，但插入前已有其他项被选中，IE11 不会自动取消旧选中项（Chrome/Firefox 会），必须手动清理。
兼容性兜底建议：
- 设默认选中时，用
radioElem.checked = true，而非setAttribute - 插入新项后，如有必要设默认值，先用
document.querySelectorAll('input[name="xxx"]').forEach(r => r.checked = false)清空，再设新项为true - 避免在 IE 中依赖
change事件冒泡深度，改用click事件更稳
