多表单元素同ID/Name取值问题：getElements系列方法失效求助

开发者阿泽

2026-7-11

解决多表单元素取值问题

问题根源

document.getElementById不能用：HTML规范要求ID必须唯一，重复ID属于非法写法，浏览器只会识别第一个匹配的元素，因此报错或取不到正确值是必然的。
document.getElementsByName/document.getElementsByClassName直接取.value无效：这两个方法返回的是元素集合（NodeList/HTMLCollection），不是单个DOM元素，必须遍历集合逐个获取值。

具体解决方案

方法1：通过Name属性获取并遍历

// 获取所有name为before_wash的元素集合
const bwElements = document.getElementsByName('before_wash');
// 收集所有元素的value到数组
const bwValues = Array.from(bwElements).map(element => element.value);
// 输出结果
console.log(bwValues);

如果需要兼容旧浏览器（不支持ES6语法），用普通循环：

var bwElements = document.getElementsByName('before_wash');
var bwValues = [];
for (var i = 0; i < bwElements.length; i++) {
    bwValues.push(bwElements[i].value);
}
console.log(bwValues);

方法2：通过Class属性获取（如果元素有统一类名）

如果你的表单元素有共同的class（比如wash-input），可以用类选择器：

const washElements = document.getElementsByClassName('wash-input');
const washValues = [];
for (var i = 0; i < washElements.length; i++) {
    washValues.push(washElements[i].value);
}
console.log(washValues);