JS实现翻页后保持Checkbox选中状态的方法

翻页保持Checkbox选中状态的需求背景

项目采用真分页机制，每次点击上下页按钮时，系统会重新调用后台方法查询数据并刷新页面。这导致原本选中的Checkbox状态重置为false。

以酷狗音乐为例，其上下页切换时选中的歌曲不会保留，用户只能在当前页选择添加后再切换至下一页。

然而项目存在特定需求，因此必须实现翻页后保持选中状态的功能。

具体需求场景为：在角色授权界面选择模块及其下的操作时，点击上下页按钮后，已选中的Checkbox应保持选中状态不变。

实现思路与核心逻辑

实现思路如下：

在界面层使用纯JavaScript实现。将选中的Checkbox中的ID（包括模块ID和操作ID）拼接成一个字符串，并将该字符串传递至后台Action处理。

每次调用此页面时，首先从后台获取已选中的ID字符串，然后在此基础上拼接当前界面中选中的ID。对于选中的Checkbox，若其ID不在容器字符串中，则将其加入；对于未选中的Checkbox，若其ID原本在容器字符串中，则将其移除。

在页面完全加载完毕后，将界面中的Checkbox与拼接的ID字符串容器进行比对。若Checkbox的ID存在于字符串容器中，则自动勾选该Checkbox；否则保持未选中状态（false）。

提示说明：

由于本思路是将拼接后的ID作为字符串处理，在JavaScript中获取Action传递过来的选中ID字符串时，需注意语法格式的正确性。

Java与JavaScript代码实现

思路实现代码如下：

Java中获取Action传递的ID容器：

 
String ids= (String)request.getAttribute("ids");
if((ids==null)){
ids="";
} 

js代码：上一页函数：

 
function _prePage()
{ 
var ids="<%=ids%>";
var checkedIds= new String(ids);
var modules = document.getElementsByName("module");
var operates = document.getElementsByName("operate");
for ( var i = 0; i < modules.length; i++) {
if (modules[i].type == "checkbox" && modules[i].checked) {
if(checkedIds.indexOf(modules[i].value)==-1){
checkedIds=checkedIds+modules[i].value+",";
} 
//判断模块下的操作
for ( var j = 0; j < operates.length; j++) {
var operateId = new String(operates[j].id);
operateId = operateId.substring(0, operateId.indexOf(","));
if (modules[i].value == operateId) {
if (operates[j].type == "checkbox"&& operates[j].checked) {
if(checkedIds.indexOf(operates[j].value)==-1){
checkedIds=checkedIds+operates[j].value+",";
} 
} 
if(operates[j].checked==false){
if(checkedIds.indexOf(operates[j].value)!=-1){
checkedIds=checkedIds.replace((operates[j].value+","),"");
} 
} 
} 
} 
} 
if(modules[i].checked==false){
if(checkedIds.indexOf(modules[i].value)!=-1){
checkedIds=checkedIds.replace((modules[i].value+","),"");
} 
} 
} 
with(document.forms[0])
{ 
action="roleAuthoriedManager!getModuleOperateBySystem?roleId="
+document.getElementById("roleId").value
+"&systemId="+document.getElementById("systemId").value
+"&pageNo="+<%=pageModelModule.getPreviousPageNumber()%>
+"&queryString="+document.getElementById("searchById").value
+"&ids="+checkedIds;
method="post";
submit();
} 
} 

在界面完全加载完毕后js代码如下：

 
document.onreadystatechange=statechange;
function statechange()
{ 
var ids="<%=ids%>";
var checkedIds= new String(ids);
if(document.readystate="complete")
{ 
//循环所有的控件
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{ 
if(inputs[i].type=="checkbox")
{ 
if(checkedIds.indexOf(inputs[i].value)!=-1)
{ 
inputs[i].checked=true;
} 
} 
} 
} 
} 

调试经验与常见问题排查

说明：在做测试时，一直提示函数未定义，不仅下页函数未定义，界面上所有按钮均提示未定义。经过长时间排查后解决，现将经验分享如下。

遇到这种情况，通常是因为页面上存在错误。JSP解析成HTML后，HTML页面中存在语法问题，导致该HTML页面无法正确解析。

初始的JS某一句代码为：varids=<%=ids%>;

查看源文件时发现，JS中下一页的某一句代码解析结果如下：varids=;

这种语法错误必然导致无法解析，从而一直无法运行。

出现这种情况的原因是：var ids=<%=ids%>;从Action传过来的ID容器是空串，因此解析后变成var ids=;

因为将ID容器当作字符串处理，所以需要写成var ids="<%=ids%>"。即使传过来的是空串，解析结果如下：var ids="";

总结：遇到整个页面的JS函数都无法执行，肯定说明JS存在语法问题，导致整个页面无法解析运行。若是某个JS函数未定义，则有可能是函数名与标签定义的函数不相同。若是某个JS函数中某个语句中某个字符未定义，则会明确提示未定义的字符。