document.getElementById只返回第一个元素，根本原因是HTML规范要求ID全局唯一，浏览器遇到重复ID时仅返回首个匹配节点；克隆单选按钮需更新name和id以避免互斥失效及label失效；可用querySelectorAll配合属性选择器批量操作同名按钮。
document.getElementById 只返回第一个元素，根本原因不是“没绑事件”
当你用 document.getElementById("option-1") 获取单选按钮却点不动，大概率不是 JS 写错了，而是页面里有多个 id="option-1"。HTML 规范强制要求 ID 全局唯一，浏览器遇到重复 ID 时，getElementById 必然只返回 DOM 中第一个匹配的节点——后面所有同名 ID 的元素，对这个 API 来说“不存在”。你绑事件的对象可能根本不是你点击的那个按钮。
克隆后单选按钮互斥失效：name 属性重复才是罪魁祸首
动态克隆包含单选按钮的区块（比如用 cloneNode(true)），若不处理 name，新旧按钮会归入同一组，导致跨区块互斥。例如原始块中 <input type="radio" name="category" value="A">，克隆后还是 name="category"，那么点新块的 A，原始块的 A 就自动取消了。
- 必须为每次克隆生成新的
name值，比如拼接时间戳或递增序号：name="category-16278945" -
id也要同步更新，否则关联的<label for="...">会指向错误控件 - 别忘了改
label[for]的值，否则点击文字无法聚焦到对应按钮
批量操作单选按钮组：用 querySelectorAll + 属性选择器绕过 ID 限制
如果模板已上线、ID 重复一时没法全量修复，又需要读取/操作所有同名单选按钮，别再硬用 getElementById。改用属性选择器能绕过唯一性校验，直接命中全部目标：
const allRadios = document.querySelectorAll('input[type="radio"][name="plan"]');
allRadios.forEach(radio => {
radio.addEventListener('change', () => {
console.log(radio.value);
});
});
这样写既不依赖 ID，也不怕重复；[name="plan"] 精准锁定语义分组，比 class 更贴近表单逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
动态生成时避免 ID 冲突：前缀比随机数更可靠
服务端渲染或 JS 拼接 HTML 时，给单选按钮设 ID，别用 Math.random() 或 Date.now() 拼接——它们不保证唯一，且调试时看不出上下文。优先用业务标识做前缀：
- 后端模板：用
id="plan-{{ user.id }}-basic" - 前端 JS：从父容器提取
data-id，生成id="plan-${parentId}-premium" - 配合
label[for]一起更新，确保可访问性不丢
真正难的不是生成“唯一字符串”，而是让这个字符串在开发、测试、屏幕阅读器里都可理解、可追溯。ID 一旦带业务语义，后续排查点击失效、表单提交错乱、Lighthouse 报告里的 “Duplicate ID” 就快得多。
