如何在单页面多表格中复用Checkbox全选功能（无需重复JS代码）

问题背景 #

现有表格的全选、列选、行选功能在单个表格下运行正常，但页面存在多个同结构表格时，原JS代码因全局选择器导致操作互相干扰，需要修改实现功能复用，无需重复编写JS逻辑。

核心思路 #

将所有操作的作用域限定在触发元素所属的表格内，通过closest('table')获取当前操作对应的表格，再在该表格范围内查找目标元素，避免全局选择器影响其他表格。

修改后的JS代码 #

$(document).ready(function() {
  // 表格全选：仅选中当前表格内所有复选框
  $('.check_all').click(function() {
    const $table = $(this).closest('table');
    $table.find(':checkbox').prop('checked', this.checked);
  });

  // 列选：仅操作当前表格对应列的复选框
  $('.check_column').click(function() {
    const $table = $(this).closest('table');
    const index = $(this).closest('th').index();
    const isChecked = $(this).prop('checked');
    
    $table.find('tbody tr').each(function() {
      $(this).find(':checkbox').eq(index).prop('checked', isChecked);
    });
  });

  // 行选：仅操作当前表格对应行的复选框
  $('.check_row').click(function() {
    const $row = $(this).closest('tr');
    $row.find(':checkbox').prop('checked', this.checked);
  });
});

多表格HTML示例 #

注意：每个表格内的复选框id必须唯一，避免label关联错误；所有表格保持统一的class命名（check_all、check_column、check_row）即可复用JS逻辑。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 第一个表格 -->
<table class="table" id="tableOne">
  <thead>
    <tr>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="check_all_1" class="check_all">
          <label for="check_all_1">全选</label>
        </div>
      </th>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="column_01_1" class="check_column">
          <label for="column_01_1">列全选</label>
        </div>
      </th>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="column_02_1" class="check_column">
          <label for="column_02_1">列全选</label>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="input_outer">
          <input type="checkbox" id="row_01_1" class="check_row">
          <label for="row_01_1">行全选</label>
        </div>
      </td>
      <td>
        <input type="checkbox" id="access_01_1" name="permissions1[]">
        <label for="access_01_1">访问</label>
      </td>
      <td>
        <input type="checkbox" id="access_02_1" name="permissions1[]">
        <label for="access_02_1">编辑</label>
      </td>
    </tr>
    <tr>
      <td>
        <div class="input_outer">
          <input type="checkbox" id="row_02_1" class="check_row">
          <label for="row_02_1">行全选</label>
        </div>
      </td>
      <td>
        <input type="checkbox" id="access_03_1" name="permissions1[]">
        <label for="access_03_1">访问</label>
      </td>
      <td>
        <input type="checkbox" id="access_04_1" name="permissions1[]">
        <label for="access_04_1">编辑</label>
      </td>
    </tr>
  </tbody>
</table>

<!-- 第二个表格 -->
<table class="table" id="tableTwo">
  <thead>
    <tr>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="check_all_2" class="check_all">
          <label for="check_all_2">全选</label>
        </div>
      </th>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="column_01_2" class="check_column">
          <label for="column_01_2">列全选</label>
        </div>
      </th>
      <th>
        <div class="input_outer">
          <input type="checkbox" id="column_02_2" class="check_column">
          <label for="column_02_2">列全选</label>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="input_outer">
          <input type="checkbox" id="row_01_2" class="check_row">
          <label for="row_01_2">行全选</label>
        </div>
      </td>
      <td>
        <input type="checkbox" id="access_01_2" name="permissions2[]">
        <label for="access_01_2">查看</label>
      </td>
      <td>
        <input type="checkbox" id="access_02_2" name="permissions2[]">
        <label for="access_02_2">删除</label>
      </td>
    </tr>
    <tr>
      <td>
        <div class="input_outer">
          <input type="checkbox" id="row_02_2" class="check_row">
          <label for="row_02_2">行全选</label>
        </div>
      </td>
      <td>
        <input type="checkbox" id="access_03_2" name="permissions2[]">
        <label for="access_03_2">查看</label>
      </td>
      <td>
        <input type="checkbox" id="access_04_2" name="permissions2[]">
        <label for="access_04_2">删除</label>
      </td>
    </tr>
  </tbody>
</table>

关键说明 #

1. 作用域限定：所有元素查找都基于closest('table')获取当前表格，确保操作只影响当前表格，不会干扰其他表格。
2. 唯一ID：每个复选框的id必须唯一，避免label的for属性关联错误，导致点击label时触发错误的复选框。
3. class复用：保持全选、列选、行选按钮的class名称统一，JS通过class绑定事件，自动应用到所有表格。

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