为DOM中指定DIV包裹的多个复选框添加事件监听器

咱们先把问题理清楚：你需要给仅被.keep-open.btn-group包裹的.dropdown-menu里的复选框绑定change事件，而且只处理页面首次加载时已经存在的DOM元素，不用管后续动态新增的内容。你之前尝试的代码没生效，主要是踩了两个小坑：选择器写错了，还混用了jQuery和原生JavaScript的方法。

原生JavaScript解决方案（推荐，符合你熟悉.addEventListener的需求） #

首先用精准的选择器定位到目标复选框，然后循环给每个元素绑定事件：

// 精准选中所有符合条件的复选框：.keep-open下的.dropdown-menu里的复选框
const targetCheckboxes = document.querySelectorAll('.keep-open .dropdown-menu input[type="checkbox"]');

// 循环遍历每个复选框，添加change事件监听器
targetCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    alert(`Checkbox clicked: ${this.nextSibling.textContent.trim()}`);
    // 这里可以根据需求获取复选框的属性
    console.log('对应的data-field值:', this.dataset.field);
    console.log('复选框value值:', this.value);
  });
});

为什么你之前的代码不行？ #

• 你用了$('#dropdown-menu input[type="checkbox"]')，但.dropdown-menu是类选择器，jQuery里类选择器要加.，而不是#（#是ID选择器）。
• 就算选择器写对了，addEventListener是原生JS的方法，不能直接用在jQuery对象上，两者语法不能混用。
• document.getElementsByClassName("dropdown-menu")会拿到所有.dropdown-menu元素，但你需要的是被.keep-open包裹的那些，所以得用更精准的选择器缩小范围。

如果你项目里用jQuery的话，也可以这么写 #

要是你的项目已经引入了jQuery，直接用jQuery的事件绑定方法也能实现，而且同样只对页面加载时存在的元素生效：

$('.keep-open .dropdown-menu input[type="checkbox"]').change(function() {
  alert(`Checkbox clicked: ${$(this).next().text().trim()}`);
  console.log('对应的data-field值:', $(this).data('field'));
  console.log('复选框value值:', $(this).val());
});

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