如何让整个列表项元素可点击以切换勾选框状态（无需jQuery）

首先，你的代码里有几个原生JS的使用误区，我帮你修正并逐点解释：

原代码的问题点 #

• document.getElementbyClassName拼写错误，正确写法是getElementsByClassName，但这个方法仅支持传入类名，无法识别div.list-checkbox button这类CSS选择器，应该用document.querySelectorAll()来获取匹配的元素集合
• 你混用了jQuery的语法（比如$(this).find），但需求是不用jQuery，所以要换成原生DOM操作方法
• 操作复选框的checked状态时，直接操作元素的checked布尔属性比getAttribute/setAttribute更可靠——因为checked属性节点和元素实际的选中状态是两个不同的概念，直接修改属性更直观准确

修正后的完整代码 #

HTML部分（保留你的原有结构） #

<div class="list-checkbox list-group list-button mx-auto mt-2"> 
  <button class="list-group-item d-flex justify-content-between align-items-center"> 
    <span>Option 1</span> 
    <label class="checkboxCustom my-auto"> 
      <input type="checkbox" checked="checked"> 
      <span class="checkmark"></span> 
    </label> 
  </button> 
</div>

JavaScript部分 #

// 获取所有需要绑定点击事件的按钮
const listButtons = document.querySelectorAll('.list-checkbox button');

// 给每个按钮添加点击监听
listButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 找到当前按钮内的复选框元素
    const checkbox = this.querySelector('input[type="checkbox"]');
    // 直接切换选中状态（取反当前值）
    checkbox.checked = !checkbox.checked;
    // 阻止事件冒泡，避免label点击时重复触发按钮的点击事件
    e.stopPropagation();
  });
});

代码说明 #

1. document.querySelectorAll('.list-checkbox button')：原生JS支持CSS选择器的元素获取方法，能精准定位到目标按钮
2. forEach遍历：给每个按钮单独绑定点击事件，确保多个列表项都能正常工作
3. this.querySelector()：在点击事件中，this指向当前被点击的按钮，通过它快速找到内部的复选框
4. checkbox.checked = !checkbox.checked：这是原生操作复选框状态最简洁的方式，直接对布尔值取反实现切换
5. e.stopPropagation()：因为按钮内部包含label，label本身点击也会切换复选框，加上这个可以避免事件冒泡导致的重复触发，体验更流畅

这样修改后，点击整个列表项（button的任意区域）就能切换复选框的状态了，完全不需要依赖jQuery。

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