具有相同 ID 的單選按鈕的 addEventListener

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

正如其他人所說，ID 必須是唯一的。 您可以使用getElementsByName獲取元素（請注意存在一些問題）並對其進行迭代：

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

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

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

另請注意， < IE8 中不存在addEventListener ，您必須使用attachEvent 。 我建議閱讀quirksmode.org 上關於事件處理的優秀文章。

Answer 2

不，那是無效的。 ID 必須是唯一的。

好吧，如果你可以 select 元素以其他方式 - 通過 class、標簽、childNode 等，你可以。

Answer 3

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

Answer 4

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

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

Answer 5

創建無線電類型元素的數組並使用 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 6

不要對 2 個元素使用相同的 id，使用類。 然后你可以使用這樣的東西

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