Javascript 向每个复选框添加eventListener

我正在寻找一种简洁明了的方法，将事件监听器添加到我的每个复选框中，而不必重复我的Javascript代码。对于JS，我仍然是个新手，因此任何帮助都将不胜感激

以下是我到目前为止所掌握的内容

函数exFunction（）{}；
//点击
var x=document.getElementById（“checkboxopt”）；
x、 addEventListener（“单击”，函数（）{
控制台日志（“Opt”）；
});
var y=document.getElementById（“checkboxopt1”）；
y、 addEventListener（“单击”，函数（）{
控制台日志（“选项1”）；
});
var z=document.getElementById（“checkboxopt2”）；
z、 addEventListener（“单击”，函数（）{
控制台日志（“Opt 2”）；
});





您可以在每个复选框中迭代：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for(var i = 0; i < checkboxes.length; i++){
     var checkbox = checkboxes[i];
     checkbox.addEventListener('click', function(){
         console.log(this);
     });
}

var checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
对于（变量i=0；i

希望有帮助

Cheers
选择全部并循环集合，然后将事件添加到集合中的每个元素


var cbs=document.querySelectorAll（'[type=“checkbox”]'）；
[]forEach.call（cbs，函数（cb）{
cb.addEventListener（“单击”，函数（）{
console.log（this.id）；
});
});
您可以将
用于
循环，并在循环之外创建函数


var c=document.querySelectorAll（'input[type=“checkbox”]”）；
for（设i=0；i






在javascript中查找
事件委派
，在这种情况下，您只需添加一个listenerThis，因为它希望改进工作代码。@pwolaq还有一个有趣的术语需要学习！我就是爱你。：）@squint，谢谢你的提醒，我从来都不知道它的存在。使用类而不是不同的id来创建和使用循环中的变量这样做很可能会导致意外的行为，因为只有最后一个元素才能获得eventbinding，由于变量的原因。@ErikSvedin:只有在事件处理程序中使用该变量时，才会出现这种情况。他的回答没有这样做，因为它使用
this
来记录元素。虽然这没有给出问题中所示的输出，但其他任何一个也没有。这里的变量基本上是不必要的。variable checkbox很好，只是一个对象指针，yes是不必要的，但对于读取它的人来说可读性更好，并且不会影响性能，因为它只是指向另一个对象的指针，垃圾收集器会处理它。另外，它被要求不重复代码，这不会像问题中的示例那样重复代码。您的事件对象方法听起来非常吸引人，我将进行一些测试和修补。谢谢你的例子和想法。