无需jQuery，如何为同CSS类的复选框绑定点击事件？

当然可以！完全不用依赖jQuery，用原生JavaScript就能轻松实现给共享同一CSS类的复选框绑定点击事件，下面给你几种实用的实现方式：

方法一：直接遍历元素绑定事件 #

先通过document.querySelectorAll('.checkbox-class')选中所有目标复选框，接着循环给每个元素添加click事件监听：

// 获取所有拥有checkbox-class类的复选框
const checkboxes = document.querySelectorAll('.checkbox-class');

// 遍历每个复选框，绑定点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 这里写你的事件处理逻辑，比如打印当前复选框的选中状态
    console.log(`当前复选框状态：${this.checked}`);
  });
});

方法二：事件委托（适配动态添加的元素） #

如果你的复选框是后续通过JS动态生成的，直接绑定的方法可能会失效，这时用事件委托更合适——把监听绑定到父元素上，借助事件冒泡来处理子元素的点击：

// 建议换成更接近目标元素的父容器（比如某个包裹复选框的div），这里用body做示例
document.body.addEventListener('click', function(event) {
  // 判断点击的元素是否是我们要处理的复选框
  if (event.target.classList.contains('checkbox-class')) {
    // 执行你的处理逻辑
    console.log(`点击的复选框状态：${event.target.checked}`);
  }
});

这种方法的优势在于：不管后续新增多少同类型的复选框，都能自动触发事件，而且只需要绑定一次监听，性能更高效。

兼容老浏览器的小补充 #

如果要兼容IE11这类较老的浏览器，querySelectorAll返回的NodeList不支持forEach，可以换成for循环遍历：

const checkboxes = document.querySelectorAll('.checkbox-class');
for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('click', function() {
    // 处理逻辑
    console.log(`复选框状态：${this.checked}`);
  });
}

内容的提问来源于stack exchange，提问作者James Ko