点击按钮无法修改checkbox.checked值的模块化环境问题排查

问题背景 #

单独运行以下代码时，按钮的类和复选框状态能正常切换：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mb-3">
        <span class="button-checkbox">
            <button type="button" class="btn active" data-toggle="buttons" data-color="primary">
                <input class="form-check-input hidden" type="checkbox" value="match" name="filters">
                <i class="far fa-square"></i>
                match
            </button>
        </span>
        <span class="button-checkbox">
            <button type="button" class="btn active" data-toggle="buttons" data-color="primary">
                <input class="form-check-input hidden" type="checkbox" value="mismatch" name="filters">
                <i class="far fa-square"></i>
                mismatch
            </button>
        </span>
        <span class="button-checkbox">
            <button type="button" class="btn active" data-toggle="buttons" data-color="primary">
                <input class="form-check-input hidden" type="checkbox" value="notfound" name="filters">
                <i class="far fa-square"></i>
                notfound
            </button>
        </span>
        <span class="button-checkbox">
            <button type="button" class="btn active" data-toggle="buttons" data-color="primary">
                <input class="form-check-input hidden" type="checkbox" value="incomplete-payment" name="filters">
                <i class="far fa-square"></i>
                incomplete-payment
            </button>
        </span>
        <span class="button-checkbox">
            <button type="button" class="btn" data-toggle="buttons" data-color="primary">
                <input class="form-check-input hidden" type="checkbox" value="all" name="filters">
                <i class="far fa-square"></i>
                all
            </button>
        </span>
    </div>

function click_filter(event) {
    if (event.target.tagName.toLowerCase() === "input") {
        return false;
    }
    let button =
        event.target.tagName.toLowerCase() === "button"
            ? event.target
            : event.target.parentNode;
    let checkbox = button.querySelector("input[type=checkbox]");
    let icon = button.querySelector("i");

    // 调试日志
    console.log("Click on filter ", checkbox.value);
    if (checkbox.checked) {
        console.log("Was checked", checkbox.checked);
        checkbox.checked = !checkbox.checked
        console.log("Has been unchecked", checkbox.checked);
    } else {
        console.log("Was unchecked", checkbox.checked);
        checkbox.checked = !checkbox.checked
        console.log("Has been checked", checkbox.checked);
    }
    // 调试日志结束

    button.classList.toggle("btn-primary", checkbox.checked);
    button.classList.toggle("active", checkbox.checked);

    // 切换图标类
    icon.classList.toggle("fa-check-square", checkbox.checked);
    icon.classList.toggle("fa-square", !checkbox.checked);
}


let filters = document.querySelectorAll(".btn[data-toggle=buttons]");

filters.forEach(filter => {
        filter.addEventListener('click', click_filter);
    });

但在模块化项目中该功能失效，控制台输出如下：

Click on filter  notfound
Was unchecked false
Has been checked true
Click on filter  notfound
Was unchecked false
Has been checked true
Click on filter  notfound
Was unchecked false
Has been checked true

项目代码结构 #

• click_filter 函数定义在 utils.js 中
• filters 选择器定义在 globals.js 中，代码为：

let filters = document.querySelectorAll(".btn[data-toggle=buttons]");
export { filters };

• main.js 代码如下：

import { filters } from './globals.js';
import { click_filter } from './utils.js';

$(document).ready(main);

function main() {
    filters.forEach(filter => {
        filter.addEventListener('click', click_filter);
    });
}

问题咨询 #

是否是模块化引入导致的问题？我尝试用 checkbox.click() 替代 checkbox.checked = !checkbox.checked 后功能生效，但需要判断 event.target.tagName.toLowerCase() === "input" 时返回以避免事件重复触发。

原因分析与解决方案 #

核心原因 #

不是模块化本身的问题，而是自定义事件逻辑和Bootstrap data-toggle="buttons" 组件的内置行为冲突了：

• Bootstrap的按钮式复选框组件会自动监听按钮点击，内部同步复选框状态和按钮样式
• 当手动修改 checkbox.checked 时，Bootstrap的事件处理（在事件流的后续阶段）会将复选框状态重置回原来的值，导致每次点击后复选框实际还是未选中状态，所以下次点击日志依然显示 Was unchecked false

解决方案 #

使用 checkbox.click() 触发原生点击事件是正确的做法，这会让Bootstrap的内置逻辑正确处理状态切换，同时需要保留对 event.target 的判断，避免复选框自身被点击时触发重复的事件处理：

修改 click_filter 函数中的状态切换部分：

// 保留input判断避免重复触发
if (event.target.tagName.toLowerCase() === "input") {
    return false;
}
// ... 其他获取button、checkbox、icon的代码
// 移除原有的手动修改checked的逻辑，替换为：
checkbox.click();
// 根据checkbox的最新状态更新样式
button.classList.toggle("btn-primary", checkbox.checked);
button.classList.toggle("active", checkbox.checked);
icon.classList.toggle("fa-check-square", checkbox.checked);
icon.classList.toggle("fa-square", !checkbox.checked);

额外注意点 #

关于模块化中的DOM加载时机：

• 原 globals.js 在模块加载时就执行 document.querySelectorAll，如果模块加载早于DOM渲染完成，filters 会是空数组，导致事件无法绑定
• 推荐将 filters 的获取逻辑改为函数，在DOM就绪后调用：
  globals.js 修改为：

  export function getFilters() {
      return document.querySelectorAll(".btn[data-toggle=buttons]");
  }
  

  main.js 修改为：

  import { getFilters } from './globals.js';
  import { click_filter } from './utils.js';
  
  $(document).ready(main);
  
  function main() {
      const filters = getFilters();
      filters.forEach(filter => {
          filter.addEventListener('click', click_filter);
      });
  }
  

  这样能确保获取到已渲染的DOM元素。

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