addEventListener用于具有相同ID的单选按钮

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

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

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

是否有解决方法，任何帮助将不胜感激。

谢谢

来源

2011-06-01 Rajesh

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

嗯，你可以，如果你能选择的元素一些其他的方式 - 按类别，标签，childNode等

来源

2011-06-01 09:39:48 RobG

-1

不使用相同的ID为2个elemetns，使用类。然后你可以使用这样的东西

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

来源

2011-06-01 09:41:16 nope

由于'getElementsByClassName'返回一个集合，这不起作用。 – 2011-06-01 10:05:51

对，我习惯了使用框架，从来没有想过这不会像这样工作。谢谢 – nope 2011-06-01 11:05:50

正如其他人所说，一个ID必须是唯一的。你可以得到与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; 
}

还要注意的是addEventListener不< IE8存在，有你有使用attachEvent。我建议阅读excellent articles about event handling on quirksmode.org。

来源

2011-06-01 10:11:01

-1

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

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

来源

2016-07-28 18:47:41

请添加一些解释为什么此代码可以帮助OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅[答案]。 – 2016-07-29 22:19:35

这段代码可以与不同的选择器一起使用，它只是获取DOM对象的列表并通过添加变化事件侦听器 – 2016-08-14 00:29:08

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

来源

2018-03-08 01:20:36

addEventListener用于具有相同ID的单选按钮

回答

相关问题