Javascript 订阅共享CSS类的复选框中的点击事件，没有jQuery？

我相信jQuery，我正在寻找的方法是

$('.checkbox-class').click(handler);

不使用jQuery可以做到这一点吗？

首先，使用该方法获取具有相同类名的所有元素。然后使用

for

循环，并对每个元素应用添加单击事件的方法

var checkboxes = document.getElementsByClassName('checkbox-class');

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('click', function() {
    console.log('checkbox checked');
  })
};

var checkbox=document.getElementsByClassName（'checkbox-class'）；
对于（i=0；i

现代浏览器现在支持

querySelector

，它执行jQuery的功能，有关详细信息，请参阅本页

还可以使用addEventListener获取事件。请参阅本页

在没有jQuery的情况下可以做到这一点吗

jQuery是用JavaScript编写的，所以总是可以用普通JS编写jQuery代码

jQuery语句中发生了两件事：

• 选中所有元素的class

  复选框class

• 附加一个回调函数以在单击任何元素时调用

可以使用该方法选择JavaScript中的元素。例如：

const checkboxes = document.querySelectorAll('.checkbox-class');

e.addEventListener('click', handler);

请注意，这将返回一个类似数组的对象，其中包含每个匹配元素

要向元素添加事件侦听器，我们使用。例如：

const checkboxes = document.querySelectorAll('.checkbox-class');

e.addEventListener('click', handler);

为了将两者结合在一起，我们需要迭代每个checkbox元素并添加click处理程序

const checkboxes = document.querySelectorAll('.checkbox-class');
Array.from(checkboxes).forEach(e => e.addEventListener('click', handler));

允许我们在querySelector[All]返回的类似数组的元素集合上使用数组原型中的方法。该方法迭代每个元素，内部函数（使用语法）进行事件绑定。

因为问题提到了“复选框”（复数）

querySelectorAll

可能是个好主意。

NodeList

有一个now，所以我们可以从

中间人中删除
数组。