如何使用原生JS实现Bootstrap5表格复选框全选与取消功能

实现方法 #

你只需要在现有代码的 Bootstrap JS 引入代码之后、</body> 标签之前插入如下原生 JavaScript 代码即可：

<script>
// 获取全选复选框元素
const selectAllCheckbox = document.getElementById('flexCheckIndeterminate');
// 获取tbody内所有子复选框元素
const childCheckboxes = document.querySelectorAll('#dataTable tbody .form-check-input');

// 给全选框绑定change事件
selectAllCheckbox.addEventListener('change', function() {
  // 遍历所有子复选框，同步选中状态
  childCheckboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
  // 清除不确定状态，适配Bootstrap交互规范
  selectAllCheckbox.indeterminate = false;
});

// 可选拓展：子复选框手动勾选时联动全选框状态
childCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const checkedCount = document.querySelectorAll('#dataTable tbody .form-check-input:checked').length;
    if (checkedCount === 0) {
      selectAllCheckbox.checked = false;
      selectAllCheckbox.indeterminate = false;
    } else if (checkedCount === childCheckboxes.length) {
      selectAllCheckbox.checked = true;
      selectAllCheckbox.indeterminate = false;
    } else {
      selectAllCheckbox.indeterminate = true;
    }
  });
});
</script>

逻辑说明 #

核心逻辑是监听全选框的change事件，触发时把所有子复选框的checked属性和全选框的状态同步，即可实现点击全选、再次点击全取消的需求。可选拓展代码可以让全选框自动匹配子复选框的选中情况，切换未选、半选、全选三种状态，符合Bootstrap官方交互设计。

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