PHP无JS/JQuery实现带分页的多复选框跨页选中功能

算力阿峰

2026-5-13

解决分页表格的跨页复选框选中问题

我来帮你搞定这个跨页选中的需求！因为HTTP是无状态的，切换分页后之前页面的复选框状态会丢失，所以核心思路是把选中项的状态存储起来，不管是存在后端Session还是前端本地存储都可以。下面给你两种可行的方案，直接基于你的代码修改：

方案一：用PHP Session存储选中项（后端方案）

这种方式依赖后端Session保存所有选中的员工，切换页面时自动同步状态，提交表单时直接从Session读取所有选中项。

修改步骤&代码：

首先要确保页面开头开启Session（如果connect.php里没开的话，自己加上），然后处理复选框的选中/取消逻辑，渲染时恢复状态：

<?php
session_start(); // 必须放在最顶部，开启Session
include("connect.php"); 

$limit = 7;
$page_no = isset($_GET['page']) ? $_GET['page'] : 1;
$start_from = ($page_no - 1) * $limit;

// 处理复选框提交：更新Session里的选中列表
if (isset($_GET['check_list'])) {
    $currentSelected = $_GET['check_list'];
    // 合并已有选中项并去重
    $_SESSION['selected_emps'] = array_unique(array_merge($_SESSION['selected_emps'] ?? [], $currentSelected));
}

// 获取已选中的员工列表，用于渲染复选框状态
$selectedEmps = $_SESSION['selected_emps'] ?? [];
?>
<form method="GET" action="">
<div class="container">
<h2>Employee Information:</h2>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>EmpId</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php 
// 用预处理语句防止SQL注入（更安全）
$stmt = $conn->prepare("SELECT * FROM emp_info LIMIT ?, ?");
$stmt->bind_param("ii", $start_from, $limit);
$stmt->execute();
$queryResult = $stmt->get_result();

while ($data = $queryResult->fetch_assoc()) { 
    $_SESSION['emp_name'] = $data['name'];
    // 判断当前员工是否已选中，设置checked属性
    $isChecked = in_array($data['name'], $selectedEmps) ? 'checked' : '';
?>
<tr>
<td><?php echo $data['emp_id'];?></td>
<td>
<!-- 去掉原来包裹复选框的a标签，不然点击复选框会跳转，打断选中操作 -->
<input type="checkbox" name="check_list[]" value="<?php echo $data['name'];?>" <?php echo $isChecked;?>>
<a href="project.php?id=<?php echo $data['emp_id'];?>&name=<?php echo $data['name']; ?>">
<?php echo $data['name'];?>
</a>
</td>
<td><?php echo $data['email'];?></td>
</tr>
<?php } ?>
</tbody>
</table>
<ul class="pagination">
<?php 
// 计算总页数
$countStmt = $conn->prepare("SELECT COUNT(*) FROM emp_info");
$countStmt->execute();
$total_records = $countStmt->get_result()->fetch_row()[0];
$total_pages = ceil($total_records / $limit);

$pagLink = "";
for ($i = 1; $i <= $total_pages; $i++) {
    if ($i == $page_no) {
        $pagLink .= "<li class='active'><a href='datatable.php?page=" . $i ."'>". $i ."</a></li>";
    } else {
        $pagLink .= "<li><a href='datatable.php?page=". $i ."'>". $i ."</a></li>";
    }
};
echo $pagLink; 
?>
</ul>
</div>
&nbsp;
<button type="submit" formaction="project.php" name="select_proj">Select Project</button>
&nbsp;
<button type="submit" formaction="addnewproj.php" name="add_proj">Add New Project</button>
</form>

然后在project.php或者addnewproj.php里，就能拿到所有跨页选中的项：

<?php
session_start();
// 获取所有选中的员工
$allSelectedEmps = $_SESSION['selected_emps'] ?? [];

// 这里可以处理你的业务逻辑，比如关联项目等

// 如果处理完需要清空选中状态，就unset
// unset($_SESSION['selected_emps']);
?>

方案二：前端LocalStorage + 后端同步（前后端结合）

这种方式用浏览器的LocalStorage存储选中项，前端负责维护状态，提交时把所有选中项一起传给后端，不需要依赖Session。

修改后的代码：

<?php
include("connect.php"); 

$limit = 7;
$page_no = isset($_GET['page']) ? $_GET['page'] : 1;
$start_from = ($page_no - 1) * $limit;
?>
<form method="GET" id="empForm" action="">
<div class="container">
<h2>Employee Information:</h2>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>EmpId</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php 
$stmt = $conn->prepare("SELECT * FROM emp_info LIMIT ?, ?");
$stmt->bind_param("ii", $start_from, $limit);
$stmt->execute();
$queryResult = $stmt->get_result();

while ($data = $queryResult->fetch_assoc()) { 
    $_SESSION['emp_name'] = $data['name'];
?>
<tr>
<td><?php echo $data['emp_id'];?></td>
<td>
<input type="checkbox" class="emp-checkbox" name="check_list[]" value="<?php echo $data['name'];?>">
<a href="project.php?id=<?php echo $data['emp_id'];?>&name=<?php echo $data['name']; ?>">
<?php echo $data['name'];?>
</a>
</td>
<td><?php echo $data['email'];?></td>
</tr>
<?php } ?>
</tbody>
</table>
<ul class="pagination">
<?php 
$countStmt = $conn->prepare("SELECT COUNT(*) FROM emp_info");
$countStmt->execute();
$total_records = $countStmt->get_result()->fetch_row()[0];
$total_pages = ceil($total_records / $limit);

$pagLink = "";
for ($i = 1; $i <= $total_pages; $i++) {
    if ($i == $page_no) {
        $pagLink .= "<li class='active'><a href='datatable.php?page=" . $i ."'>". $i ."</a></li>";
    } else {
        $pagLink .= "<li><a href='datatable.php?page=". $i ."'>". $i ."</a></li>";
    }
};
echo $pagLink; 
?>
</ul>
</div>
&nbsp;
<button type="submit" formaction="project.php" name="select_proj">Select Project</button>
&nbsp;
<button type="submit" formaction="addnewproj.php" name="add_proj">Add New Project</button>
<!-- 隐藏输入框，用来传递所有选中项 -->
<input type="hidden" id="allSelected" name="all_selected" value="">
</form>

<script>
// 页面加载时，恢复复选框的选中状态
document.addEventListener('DOMContentLoaded', function() {
    const selectedItems = JSON.parse(localStorage.getItem('selectedEmps')) || [];
    document.querySelectorAll('.emp-checkbox').forEach(checkbox => {
        checkbox.checked = selectedItems.includes(checkbox.value);
    });
});

// 监听复选框点击，更新LocalStorage
document.querySelectorAll('.emp-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        let selectedItems = JSON.parse(localStorage.getItem('selectedEmps')) || [];
        if (this.checked) {
            // 去重添加
            if (!selectedItems.includes(this.value)) selectedItems.push(this.value);
        } else {
            // 移除该项
            selectedItems = selectedItems.filter(item => item !== this.value);
        }
        localStorage.setItem('selectedEmps', JSON.stringify(selectedItems));
    });
});

// 提交表单时，把所有选中项放入隐藏输入框
document.getElementById('empForm').addEventListener('submit', function() {
    const selectedItems = JSON.parse(localStorage.getItem('selectedEmps')) || [];
    document.getElementById('allSelected').value = JSON.stringify(selectedItems);
});
</script>

然后在后端接收的页面（比如project.php）里，获取所有选中项：

<?php
if (isset($_GET['all_selected'])) {
    $allSelectedEmps = json_decode($_GET['all_selected'], true);
    // 处理你的业务逻辑
}
?>

方案对比：

Session方案：适合需要服务器端跟踪选中状态的场景，用户关闭浏览器后Session会过期，状态清空。
LocalStorage方案：纯前端存储，不依赖后端，用户关闭浏览器后状态还会保留，直到手动清除缓存。

额外提示：

原来的代码里复选框被<a>标签包裹，点击复选框会跳转页面，这会打断选中操作，所以我把<a>标签移到了员工名字上，这样点击名字跳转，点击复选框正常选中。
用了预处理语句替代直接拼接SQL，防止SQL注入，更安全。

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

PHP无JS/JQuery实现带分页的多复选框跨页选中功能

方案一：用PHP Session存储选中项（后端方案） #

修改步骤&代码： #

方案二：前端LocalStorage + 后端同步（前后端结合） #

修改后的代码： #

方案对比： #