Javascript 相同id单选按钮的addEventListener

是否可以使用

addEventListener

向具有相同id的多个单选按钮添加事件

<input id="radId" type="radio" value="0" name="radioname">No
<input id="radId" type="radio" value="1" name="radioname">Yes

否
对

我试图使用

document.getelementByID

附加事件，但它总是选择第一个单选按钮

如果有办法解决这个问题，我们将非常感谢您的帮助

---

谢谢不，那是无效的。ID必须是唯一的

---

当然，如果您可以通过其他方式选择元素-按类、标记、子节点等。

不要对两个元素使用相同的id，请使用类。然后你可以用这样的东西

document.getElementsByClassName("whateverclass").onclick=function()

---

正如其他人所说，ID必须是唯一的。您可以使用（）获取元素并对其进行迭代：

var handler = function() {
    //...
};

var radios = document.getElementsByName('radioname');

for(var i = radios.length; i--; ) {
    radios[i].onclick = handler;
}

---

还要注意，

addEventListener

在创建radio类型元素的数组并使用forEach

<input type="radio" value="0" name="radioname">No
<input type="radio" value="1" name="radioname">Yes

<script>
//Load entire html document
window.addEventListener("load", function(){
   //Array elements radio
   var radioOption = [document.getElementsByName('radioname')[0],document.getElementsByName('radioname')[1]];
   //Use forEach
   radioOption.forEach(function(e) {
       e.addEventListener("click", function() {             
       alert(e.value);
       });
    });
});
</script>

否
对
//加载整个html文档
addEventListener（“加载”，函数（）{
//阵元无线电
var radioOption=[document.getElementsByName（'radioname'）[0]，document.getElementsByName（'radioname'）[1]]；
//使用forEach
radioOption.forEach（功能（e）{
e、 addEventListener（“单击”，函数（）{
警觉（e.value）；
});
});
});

这将不起作用，因为

GetElementsByCassName

返回一个集合。对，我已经习惯了使用框架，从来没有想过这不会像这样工作。谢谢，请解释一下为什么这段代码对OP有帮助。这将有助于提供一个未来观众可以学习的答案。有关更多信息，请参阅。此代码可与不同的选择器一起使用，它只是获取DOM对象列表并通过它们循环添加更改事件侦听器。如果可以执行以下操作，为什么要创建静态数组：

document.getElementsByName（'radioname'）。forEach

<input type="radio" value="0" name="radioname">No
<input type="radio" value="1" name="radioname">Yes

<script>
//Load entire html document
window.addEventListener("load", function(){
   //Array elements radio
   var radioOption = [document.getElementsByName('radioname')[0],document.getElementsByName('radioname')[1]];
   //Use forEach
   radioOption.forEach(function(e) {
       e.addEventListener("click", function() {             
       alert(e.value);
       });
    });
});
</script>

document.getElementsByName('radioname').forEach(function(e) {
    e.addEventListener("click", function() {
        alert(e.value);
    });
});