如何让Bootstrap 5整个复选框模块可点击（不修改HTML）

问题核心在于：手动切换复选框checked属性时，不会自动触发原生change事件——只有用户直接点击复选框/标签，或通过代码主动触发事件，绑定在复选框上的change监听器才会响应。以下是无需修改HTML的两种解决方式：

jQuery 实现 #

假设你的复选框模块容器类名为.checkbox-container，代码如下：

$('.checkbox-container').on('click', function(e) {
  // 排除复选框和标签本身的点击，避免重复触发事件
  if (!$(e.target).is('input[type="checkbox"], label')) {
    const $checkbox = $(this).find('input[type="checkbox"]');
    // 切换选中状态并手动触发change事件
    $checkbox.prop('checked', !$checkbox.prop('checked')).trigger('change');
  }
});

原生 JavaScript 实现 #

若项目不依赖jQuery，原生JS方案同样可行：

// 选中所有复选框模块容器
document.querySelectorAll('.checkbox-container').forEach(container => {
  container.addEventListener('click', function(e) {
    const checkbox = this.querySelector('input[type="checkbox"]');
    const targetIsCheckboxOrLabel = e.target === checkbox || (checkbox.labels && e.target === checkbox.labels[0]);
    
    if (!targetIsCheckboxOrLabel) {
      // 切换选中状态
      checkbox.checked = !checkbox.checked;
      // 手动派发change事件
      checkbox.dispatchEvent(new Event('change'));
    }
  });
});

关键说明 #

• 代码会保留原生复选框的键盘交互逻辑，Tab、Space等按键操作不受影响
• 只需将.checkbox-container替换为你实际使用的模块容器选择器（如ID、其他类名）
• 点击模块内任意区域（包括复选框与标签间的空白），都会和点击复选框/标签产生完全一致的效果：既切换选中状态，又触发change事件

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