为何表头全选checkbox会选中所有表格行而非当前表格行？

核心错误 #

1. 全选按钮操作范围错误：你定义的tableInputs是页面中所有表格的行checkbox集合，点击任意表格的全选按钮时，都会遍历这个全局集合，导致所有表格的行被批量选中/取消。
2. 计数逻辑重复且依赖错误操作：全选事件里重复写了计数逻辑，且因为错误操作了所有行，导致计数器显示的是全部行的选中数量，而非当前表格操作后的总选中数。

修复后的完整代码 #

JavaScript

// 遍历工具函数
var forEach = function forEach(arr, callback) {
  Array.prototype.forEach.call(arr, callback);
};

var tableInputs = document.querySelectorAll('.table tbody td .form-check-input');
var tableSelectAll = document.querySelectorAll('.table thead th .form-check-input');
var count = document.querySelector('.output span')

// 统一更新选中计数的函数
function updateSelectedCount() {
  const checkedItems = document.querySelectorAll('.table tbody td .form-check-input:checked');
  count.textContent = checkedItems.length;
}

// 行checkbox事件处理
forEach(tableInputs, function(element) {
  element.addEventListener('change', function() {
    // 切换行高亮状态
    const row = element.closest('tr');
    row.classList.toggle('active', element.checked);

    // 更新总计数
    updateSelectedCount();

    // 同步当前表格的全选按钮状态（优化体验）
    const currentTable = element.closest('table');
    const allRowChecks = currentTable.querySelectorAll('.table tbody td .form-check-input');
    const allChecked = Array.from(allRowChecks).every(input => input.checked);
    currentTable.querySelector('.table thead th .form-check-input').checked = allChecked;
  });
});

// 表头全选按钮事件处理
forEach(tableSelectAll, function(element) {
  element.addEventListener('change', function() {
    // 获取当前按钮所在的表格，限定操作范围
    const currentTable = element.closest('table');
    const rowCheckboxes = currentTable.querySelectorAll('.table tbody td .form-check-input');

    // 只操作当前表格内的行checkbox
    forEach(rowCheckboxes, function(input) {
      input.checked = element.checked;
      const row = input.closest('tr');
      row.classList.toggle('active', element.checked);
    });

    // 更新总计数
    updateSelectedCount();
  });
});

CSS（无修改）

.form-check-input {
  border: solid 1px #000;
  position: relative;
}

tr.active {
  background-color: lightblue;
}

body { margin: 0; zoom: .88; }
p { margin: 0; }

HTML（无修改）

<div class="container">
  <div class="row">
    <div class="col-12">
      <p>Table 1</p>

      <table class="table table-sm table-borderless">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Clark Kent</a></td>
            <td><span>Daily Planet</span></td>
            <td><span>Flight</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Hal Jordan</a></td>
            <td><span>Green Lantern Corps</span></td>
            <td>Lighting</td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Arthur Curry</a></td>
            <td><span>Atlantis Water</span></td>
            <td>Aquatics</td>
          </tr>
        </tbody>
      </table>

      <p>Table 2</p>
      <table class="table table-sm table-borderless ">
        <thead>
          <tr>
            <th><input class="form-check-input" type="checkbox" value=""></th>
            <th>Request date</th>
            <th>Name</th>
            <th>Organisation/Employer</th>
            <th>Selected Course(s)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Barry Allen</a></td>
            <td><span>Star Labs</span></td>
            <td><span>Speed</span></td>
          </tr>
          <tr>
            <td><input class="form-check-input" type="checkbox" value=""></td>
            <td>10/10/2014</td>
            <td><a href="#">Bruce Wayne</a></td>
            <td><span>Wayne Enterprises</span></td>
            <td>Combat</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<p class="output">Total selected: <span>0</span></p>

关键修复点 #

1. 限定操作范围：用element.closest('table')获取当前按钮/复选框所在的表格，确保只操作当前表格内的元素，而非全局所有表格。
2. 统一计数逻辑：抽离updateSelectedCount函数，避免重复代码，确保计数始终准确反映页面中所有选中行的总数。
3. 健壮的DOM选择：用closest('tr')替代parentNode.parentNode，即使DOM结构微调，代码也不会失效。
4. 体验优化：行复选框状态变化时，同步更新当前表格的全选按钮状态，让交互更连贯。

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