多页表格Checkbox选中值跨页丢失问题求助

问题描述 #

通过循环生成多页表格，表格内包含Checkbox控件。单页内选中Checkbox时，其值能正常以列表形式展示，但切换到第二页并选中Checkbox时，展示列表会被重置，仅显示当前第二页的选中值。

相关代码 #

表格循环生成代码（PHP） #

<?php
while($row1 = mysqli_fetch_array($result1))
{
    $rand1 = rand() . "\n";
    $rand2 = rand() . "\n";
    $rand3 = rand() . "\n";
    $rand4 = rand() . "\n";
    $rand5 = rand() . "\n";
    $rand6 = rand() . "\n";
                    
    echo '<tr><td><font face="Verdana">'.$row1["name"].'</font></td>';
                                
    echo '<td>
                <center>
                    <font face="Verdana">
                    <b>
                        <input type="checkbox" 
                            onclick="usluga(this)" 
                            id="'.$rand1.'" 
                            class="checkbox-offers" 
                            data-display="• <font size=2px>'.$row1["name"].'</font><br/>" 
                            value="'.$row1["len"].'" />
                        <label for="'.$rand1.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["len"]).'</label>
                    </b>
                    </font>
                </center>
            </td>';
                                
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga(this)" id="'.$rand2.'" class="checkbox-offers" data-display="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["myt"].'" /><label for="'.$rand2.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["myt"]).'</label></b></font></center></td>';
                            
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga(this)" id="'.$rand3.'" class="checkbox-offers" data-display="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["tr"].'" /><label for="'.$rand3.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["tr"]).'</label></b></font></center></td>';
                          
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga(this)" id="'.$rand4.'" class="checkbox-offers" data-display="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["kr"].'" /><label for="'.$rand4.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["kr"]).'</label></b></font></center></td>';
                          
    echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga(this)" id="'.$rand5.'" class="checkbox-offers" data-display="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["var"].'" /><label for="'.$rand5.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["var"]).'</label></b></font></center></td>';
                          
     echo '<td><center><font face="Verdana"><b><input type="checkbox" onclick="usluga(this)" id="'.$rand6.'" class="checkbox-offers" data-display="• <font size=2px>'.$row1["name"].'</font><br/>" value="'.$row1["kor"].'" /><label for="'.$rand6.'">'.preg_replace("/^$/","<font color=red size=2px style='text-transform: uppercase;'>Услуга не оказывается</font>",$row1["kor"]).'</label></b></font></center></td>'; 
}
?>

原Checkbox值展示函数（JavaScript） #

function usluga() {
    var x = [].map.call(document.querySelectorAll('[class="checkbox-offers"]:checked'), function(v) {
        return v.name
    }).join(' ');
    document.getElementById("usluga").innerHTML = x;
};

值展示元素 #

<p id="usluga"></p>

问题原因 #

多数分页插件的实现逻辑是：切换页面时会移除非当前页的DOM元素，导致document.querySelectorAll只能获取到当前页的选中项，之前页面的选中状态没有被持久化，所以展示内容会被重置。

解决方案 #

步骤1：持久化选中状态 #

定义全局变量保存所有选中项的唯一标识，避免DOM元素被移除后丢失状态：

// 用Set存储选中项的唯一键，自动去重
let selectedItems = new Set();

步骤2：修改Checkbox点击事件 #

将原onclick="usluga()"改为onclick="usluga(this)"，传递当前点击的Checkbox元素，方便后续处理。

步骤3：更新值展示函数 #

修改usluga函数，基于全局Set来维护选中状态，而不是仅依赖当前DOM：

function usluga(el) {
    // 用data-display和value组合生成唯一键，确保同一服务的不同选项不会重复
    const uniqueKey = el.dataset.display + el.value;
    
    // 更新选中状态
    if (el.checked) {
        selectedItems.add(uniqueKey);
    } else {
        selectedItems.delete(uniqueKey);
    }
    
    // 生成展示内容，提取每个选中项的display文本
    const displayContent = Array.from(selectedItems).map(key => {
        // 拆分出data-display部分
        return key.split(el.value)[0];
    }).join(' ');
    
    document.getElementById("usluga").innerHTML = displayContent;
}

步骤4：分页切换时恢复Checkbox状态 #

在分页切换完成后，调用以下函数，根据selectedItems恢复当前页Checkbox的选中状态：

function restoreCheckboxState() {
    document.querySelectorAll('.checkbox-offers').forEach(el => {
        const uniqueKey = el.dataset.display + el.value;
        el.checked = selectedItems.has(uniqueKey);
    });
}

注意：需要在你的分页切换逻辑中，添加调用restoreCheckboxState()的代码，确保切换页面后Checkbox状态正确。

额外优化 #

原代码中把HTML标签放在name属性里不符合规范，已改为用data-display属性存储展示文本，更符合HTML标准。

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