同一ID分配给多个单选按钮的问题：原因排查与JavaScript选中方法

为什么会出现多个单选按钮共用同一个ID？ #

这种情况几乎都是人为失误或者代码逻辑漏洞导致的，常见原因包括：

• 复制粘贴偷懒：开发者复制第一个单选按钮的代码后，忘记修改id属性，直接复用了相同值
• 动态渲染错误：用循环（比如for循环、模板引擎）生成单选按钮时，id的生成逻辑没有绑定唯一标识（比如索引、唯一ID值），导致所有元素的id重复
• 维护遗留问题：旧代码迭代时，新增单选按钮没有检查现有ID，导致冲突
• 框架使用不当：在React、Vue这类框架中，模板里的id没有结合key或者唯一变量生成，导致批量渲染时重复

另外要注意：HTML规范明确要求id属性在整个文档中必须唯一，重复ID属于无效的HTML，会导致浏览器行为不可预测。

为什么只能选中第一个按钮？ #

浏览器处理DOM时，getElementById()这类API只会返回第一个匹配该ID的元素，而且对于单选按钮的交互逻辑，浏览器默认只会识别第一个拥有重复ID的元素，后续的同ID元素会被忽略，这就是你只能选中第一个的原因。

如何用JavaScript选中其他重复ID的单选按钮？ #

既然不能依赖id查询，我们可以用其他方式定位目标元素：

1. 通过querySelectorAll遍历同ID元素
   因为querySelectorAll会返回所有匹配选择器的元素集合，我们可以通过索引选中目标按钮：

// 选中第二个重复ID的单选按钮（索引从0开始）
document.querySelectorAll('#your-duplicate-id')[1].checked = true;

2. 通过其他属性定位（更可靠）
   如果单选按钮有统一的name属性（单选按钮本来就应该通过相同name实现互斥），可以直接通过name查询：

// 选中name为"radio-group"的第二个单选按钮
document.querySelectorAll('input[name="radio-group"]')[1].checked = true;

也可以结合class、data-*属性等特征定位，比如：

// 选中带有特定data值的单选按钮
document.querySelector('input[data-option="second-choice"]').checked = true;

3. 通过父元素定位
   如果这些单选按钮在同一个容器里，可以先找到父元素，再遍历子元素：

// 找到父容器，再选中其下的第二个单选按钮
const container = document.getElementById('radio-container');
container.querySelectorAll('input[type="radio"]')[1].checked = true;

重要提醒：修复重复ID才是根本解决办法 #

虽然上面的方法能临时解决选中问题，但重复ID会引发更多潜在问题：比如CSS样式失效、无障碍工具（屏幕阅读器）无法正常工作、其他JS逻辑出错等。建议你：

• 给每个单选按钮分配唯一的id（比如在原ID后加索引、后缀）
• 确保单选按钮的name属性相同（这才是实现单选互斥的正确方式，和id无关）

内容的提问来源于stack exchange，提问作者Lai Parekh