订阅来自共享 CSS 类的复选框的点击事件，没有 jQuery?

Question

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

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

没有jQuery可以做到这一点吗？

Answer 1

没有jQuery可以做到这一点吗？

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

jQuery语句中发生了两件事：

• 选择具有类checkbox-class的所有元素
• 附加要在单击任何元素时调用的回调函数

在 JavaScript 中选择元素可以使用querySelectorAll方法完成。例如：

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

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

要将事件侦听器添加到元素，我们使用addEventListener.例如：

e.addEventListener('click', handler);

要将两者放在一起，我们需要遍历每个复选框元素并添加单击处理程序。

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

Array.from允许我们在 querySelector[All] 返回的类似数组的元素集合上使用 Array 原型中的方法。forEach方法循环访问每个元素，内部函数(使用 fat-arrow 语法)执行事件绑定。

Answer 2

CodePen 示例。

首先，使用 getElementsByClassName 方法获取具有相同类名的所有元素。然后使用for循环并将 addEventListener 方法应用于每个元素以添加单击事件。

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

Answer 3

现代浏览器现在支持querySelector它执行 jQuery 的功能，有关详细信息，请参阅此页面。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

您也可以使用 addEventListener 来获取事件。请参阅此页面

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers