如何使用JavaScript为所有相同ID元素设置相同值 解决表单提交取值异常问题

HTML 规范明确要求同一页面内 ID 必须全局唯一，浏览器原生的 document.getElementById() 方法只会返回页面中第一个匹配对应 ID 的元素，无法选中所有重名 ID 的元素，这是你原有代码不生效的根本原因。

使用 document.querySelectorAll() 方法通过 CSS 选择器匹配所有符合条件的元素，批量完成赋值，修改后的 onMouseOver 函数如下：

function onMouseOver(year){
    var curYear = year.id; 
    // 批量给所有id为round的输入框赋值
    document.querySelectorAll('#round').forEach(item => {
        item.value = curYear
    })
    // 批量给所有id为rnd的输入框赋值，请确保currentNumOfRounds变量已正确定义
    document.querySelectorAll('#rnd').forEach(item => {
        item.value = currentNumOfRounds
    })
}

重复 ID 属于不规范的HTML写法，可能引发其他未知问题，建议按以下逻辑优化：

1. 移除输入框的重复ID，替换为通用class标识：

<input type="hidden" name="round" class="round-input">
<input type="hidden" name="rnd" class="rnd-input">

2. 修改JS逻辑，通过class选择器匹配元素，同时可以优化为只更新当前hover区块内的输入框，不需要全页面遍历，性能更高：

function onMouseOver(year){
    var curYear = year.id; 
    // 只修改当前hover节点下的输入框，无需遍历全页面元素
    year.querySelector('.round-input').value = curYear
    year.querySelector('.rnd-input').value = currentNumOfRounds
}

补充说明：你原有代码中所有输入框的name属性完全相同，表单提交时同name的非数组表单元素会被浏览器自动覆盖，仅保留最后一个的值。如果你的需求是点击哪张图片就提交对应年份的值，使用上面只修改当前节点输入框的方案即可满足需求，不需要给全页面所有输入框赋值。

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