相同ID的checkbox取值问题：getElementById仅能获取首个元素值

HTML规范明确要求ID属性在整个页面中必须唯一，document.getElementById 本来就是设计用来查找唯一元素的，只会返回第一个匹配到对应ID的元素，所以你只能拿到第一个value为2的复选框的值，这是正常的标准行为，不是代码出了bug。

最优方案（推荐）：修正DOM的重复ID问题 #

先调整DOM结构，把重复的ID换成公共类名，避免违反HTML规范引发其他不可预期的渲染或脚本问题：

<input type="checkbox" name="asd" class="switchA" value="2">
<input type="checkbox" name="asdf" class="switchA" value="1">

对应调整JS逻辑，用querySelectorAll获取所有匹配的复选框：

// 获取所有类名为switchA的复选框
const switchChecks = document.querySelectorAll('.switchA');
// 批量获取两个复选框的数值
const allValues = Array.from(switchChecks).map(item => item.value);
console.log(allValues); // 输出 ["2", "1"]
// 获取value为1的复选框的选中状态
const value1Checked = Array.from(switchChecks).find(item => item.value === '1')?.checked ?? false;
console.log(value1Checked); // 选中返回true，未选中返回false

如果需要兼容ES2020之前的浏览器环境，把可选链?.和空值合并??换成普通判空逻辑即可。

兼容方案（无法修改DOM时使用） #

如果因为业务限制不能修改现有DOM的重复ID，可以用属性选择器匹配所有ID为switchA的元素：

// 用属性选择器匹配所有id=switchA的input元素
const switchChecks = document.querySelectorAll('input[id="switchA"]');
// 后续取值、判断选中状态的逻辑和上面完全一致
const allValues = Array.from(switchChecks).map(item => item.value);
const value1Checked = Array.from(switchChecks).find(item => item.value === '1')?.checked ?? false;

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