如何创建可点击checkbox标签：触发独立事件而非切换复选框状态

核心逻辑是批量绑定点击事件，同时阻止label的默认点击行为，避免直接触发checkbox状态切换，所有逻辑完全由自定义代码控制。

原生JavaScript实现（无需引入第三方库） #

document.addEventListener('DOMContentLoaded', function() {
  // 选中目标容器下的所有label元素
  const labelList = document.querySelectorAll('#multi_select label');
  labelList.forEach(labelItem => {
    labelItem.addEventListener('click', function(e) {
      // 阻止默认行为，禁止自动触发checkbox切换
      e.preventDefault();
      // 自定义逻辑示例：弹出当前label的id
      alert(this.id);
      // 如需控制对应checkbox，可通过前一个兄弟节点获取
      const targetCheckbox = this.previousElementSibling;
      // 示例：手动切换checkbox选中状态
      // targetCheckbox.checked = !targetCheckbox.checked;
    })
  })
})

jQuery实现（适合已引入jQuery的项目） #

$(document).ready(function() {
  $('#multi_select label').on('click', function(e) {
    e.preventDefault();
    alert($(this).attr('id'));
    // 控制对应checkbox示例
    // const $targetCheckbox = $(this).prev();
    // $targetCheckbox.prop('checked', !$targetCheckbox.prop('checked'));
  })
})

说明 #

• 不需要给每个label单独加onclick属性，页面加载完成后会自动批量绑定所有符合条件的label的点击事件
• e.preventDefault()用于屏蔽浏览器默认的label联动checkbox的行为，保证checkbox的状态完全由你的自定义逻辑控制
• 你可以将alert的部分替换为你需要的任意自定义事件逻辑，处理完成后再自行决定是否修改对应checkbox的选中状态

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