如何检测bootstrap-select插件的全选/取消全选按钮点击事件？

你的情况我清楚：用的是已停止维护的Bootstrap Select旧版本，需要检测data-actions-box生成的全选/取消全选按钮点击，但插件只触发原生change事件且不带按钮标识，之前全局点击监听因为事件被阻止冒泡没生效。这里给你几个不用改插件源码的可行方案：

方案一：通过change事件结合选项状态变化判断 #

利用全选/取消全选操作会导致选中数量突变的特性，对比前后选中数和总选项数来判断操作类型：

// 存储每个目标select的上次选中选项数量
const lastCheckedCounts = new Map();

// 遍历所有带data-actions-box的下拉框
document.querySelectorAll('select[data-actions-box]').forEach(select => {
  const totalOptNum = select.querySelectorAll('option').length;
  // 初始化记录当前选中数
  lastCheckedCounts.set(select, select.querySelectorAll('option:checked').length);

  select.addEventListener('change', () => {
    const currentCheckedNum = select.querySelectorAll('option:checked').length;
    const prevNum = lastCheckedCounts.get(select);

    // 从非全选状态变为全选 → 点击了全选按钮
    if (currentCheckedNum === totalOptNum && prevNum < totalOptNum) {
      console.log('全选按钮被点击');
      // 这里执行你的业务逻辑
    }
    // 从非空选中状态变为全不选 → 点击了取消全选按钮
    else if (currentCheckedNum === 0 && prevNum > 0) {
      console.log('取消全选按钮被点击');
      // 这里执行你的业务逻辑
    }

    // 更新记录的选中数
    lastCheckedCounts.set(select, currentCheckedNum);
  });
});

这个方案的优势是不用管动态元素的生成时机，完全依赖原生change事件，兼容性好。

方案二：在下拉框显示时绑定按钮点击事件 #

插件的下拉框是动态生成的，页面初始化时按钮还不存在，所以可以利用插件的show.bs.select事件（下拉框展开时触发），在此时给按钮绑定点击监听：

document.querySelectorAll('select[data-actions-box]').forEach(select => {
  select.addEventListener('show.bs.select', () => {
    // 找到当前下拉框对应的菜单容器
    const dropdownMenu = select.nextElementSibling.querySelector('.dropdown-menu');
    if (!dropdownMenu) return;

    // 获取全选/取消全选按钮
    const selectAllBtn = dropdownMenu.querySelector('button.bs-select-all');
    const deselectAllBtn = dropdownMenu.querySelector('button.bs-deselect-all');

    // 绑定点击事件，用{once: true}避免重复绑定
    selectAllBtn?.addEventListener('click', () => {
      console.log('全选按钮被点击');
      // 执行你的逻辑
    }, { once: true });

    deselectAllBtn?.addEventListener('click', () => {
      console.log('取消全选按钮被点击');
      // 执行你的逻辑
    }, { once: true });
  });
});

这个方案能直接捕获按钮点击，适合需要在点击时立即执行逻辑（不需要等change事件）的场景。

为什么之前的全局点击监听没生效？ #

大概率是插件在按钮的点击处理函数里调用了event.stopPropagation()，阻止了事件冒泡到document层级，所以全局监听捕获不到按钮的点击事件。

如果以上方案都无法满足你的需求，再考虑修改插件源码：找到全选/取消全选按钮的点击处理代码，在其中派发自定义事件（比如selectall.bs.select和deselectall.bs.select），之后就能在自己的代码里监听这些自定义事件了。

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