如何在PHP用户列表表格中实现复选框全选功能？

你已经找对了方向，只是JS代码没写完，还有点HTML结构的小细节需要调整，我来帮你搞定：

第一步：修正表格HTML结构 #

你现在把<tbody>放在了while循环内部，这会导致每一行都生成独立的tbody标签，不符合HTML规范，还可能干扰JS选择器的工作。把tbody移到循环外面，只保留一个：

<div class="px-4">
  <div class="table-wrapper">
    <!--Table-->
    <table class="table table-hover mb-0">
      <!--Table head-->
      <thead>
        <tr>
          <th scope="row">
            <!-- 全选复选框，注意label的for属性要和input的id对应 -->
            <input type="checkbox" class="js-selectall" id="selectAll" data-target=".js-selectall1" />
            <label for="selectAll" class="label-table"></label>
          </th>
          <th class="th-lg"><a>ID </a></th>
          <th class="th-lg"><a href="">Nome</a></th>
          <th class="th-lg"><a href="">Email</a></th>
          <th class="th-lg"><a href="">Azioni</a></th>
        </tr>
      </thead>
      <!--Table head-->
      <!--Table body-->
      <tbody>
        <?php $i=0; while($row = mysqli_fetch_assoc($query)){ ?>
        <tr>
          <th scope="row">
            <input name="check[]" class="js-selectall1" type="checkbox" id="<?php echo $row['id'] ;?>" value="<?php echo $row['id'] ;?>">
            <label for="<?php echo $row['id'] ;?>" class="label-table"></label>
          </th>
          <td><?php echo $row['id'] ;?><br></td>
          <td><?php echo $row['nome'] ;?><br></td>
          <td><?php echo $row['email'] ;?><br></td>
          <td>
            <a href="#edit<?php echo $row['id']; ?>" data-toggle="modal" class="btn btn-outline-blue btn-rounded btn-sm px-2">
              <i class="fa fa-info-circle mt-0"></i>
            </a>
            <?php include('button.php'); ?>
          </td>
        </tr>
        <?php } ?>
      </tbody>
      <!--Table body-->
    </table>
    <!--Table-->
  </div>
  <hr class="my-0">
  <!--Bottom Table UI-->
  <div class="d-flex justify-content-between">
    <!-- 这里补充你的删除按钮表单（如果之前没写完整） -->
    <form method="post">
      <button type="submit" name="delete" class="btn btn-danger">Elimina Selezionati</button>
    </form>
  </div>
</div>

第二步：补全JavaScript逻辑 #

你之前的JS代码只写了一半，现在补全全选/取消全选的核心逻辑，同时添加反向同步：当所有单个复选框被选中时，自动勾选全选框；如果有一个未选中，就取消全选框的勾选状态：

<!-- 确保页面引入了jQuery，如果项目已经引入过可以跳过这行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 全选/取消全选触发逻辑
    $('.js-selectall').on('change', function() {
        var isChecked = $(this).prop("checked");
        var targetSelector = $(this).data('target');
        // 给所有目标复选框设置相同的选中状态
        $(targetSelector).prop('checked', isChecked);
    });

    // 单个复选框变化时，同步全选框状态
    $('.js-selectall1').on('change', function() {
        var totalItems = $('.js-selectall1').length;
        var checkedItems = $('.js-selectall1:checked').length;
        // 所有复选框都选中时，全选框自动勾选；否则取消
        $('.js-selectall').prop('checked', totalItems === checkedItems);
    });
});
</script>

第三步：确认PHP删除逻辑无需修改 #

你的PHP删除逻辑是基于$_POST['check']数组实现的，我们保留了单个复选框的name="check[]"属性，所以删除功能完全不受影响，依然可以正常删除选中的用户。

小提示 #

• 确保页面引入了jQuery，否则JS代码无法运行（如果你的项目已经全局引入过，就不用重复添加）。
• 全选复选框的id和对应label的for属性要保持一致，这样点击label也能触发复选框状态变化，提升用户体验。

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