Question

是否可以使用addEventListener将事件添加到具有相同ID的多个单选按钮？

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

我尝试使用document.getelementByID附加事件但是它总是选择第一个单选按钮。

有没有解决方法，任何帮助都将受到高度赞赏。

谢谢

Answer 1

正如其他人所说，身份证必须是独一无二的。您可以使用getElementsByName（note that there are some issues）获取元素并迭代它们：

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

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

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

另请注意，＆lt; {1}}中不存在addEventListener IE8，你必须使用attachEvent。我建议阅读excellent articles about event handling on quirksmode.org。

Answer 2

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

好吧，如果你可以通过class，tag，childNode等以其他方式选择元素，那么你可以。

Answer 3

创建无线电类型元素的数组并使用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>

Answer 4

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

Answer 5

 var radiobuttonlist= document.querySelectorAll('#radId');
var radioButtonItems = [].slice.call(radiobuttonlist);

    radioButtonItems.forEach(function (item, idx) {
    item.addEventListener('change',YourFunction);});

Answer 6

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

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

具有相同id的单选按钮的addEventListener

6 个答案: