js实现翻页后保持checkbox选中状态

js实现翻页后保持checkbox选中状态
在项⽬中有需求如下：上下分页后，选中的checkbox状态保持不变。

项⽬中的分页使⽤真分页，每次点击上下页按钮后，再次调⽤后台⽅法查询，重新刷新此页⾯。

所以checkbox为false。

⽐如酷狗⾳乐中，上下页选中的歌曲不会保留，只能在每页中选择添加后，再切换下页。

但是项⽬中有着需求，所以只能完成实现。

项⽬具体的需求如下：给⾓⾊授权时，选择模块以及模块下的操作，点击上下页后选中的checkbox不变。

界⾯如下：
实现的思路如下：
在界⾯中，使⽤纯js完成。

把选中的checkbox中的id，其中包括模块id，操作id，拼接成⼀个字符串，然后把字符串传递到action中。

每次调⽤此页⾯时，⾸选调⽤action中的选中的id字符串，然后根据在id字符串的基础上，再次拼接本界⾯中选中的id。

选中的checkbox，需要判断，若不在id容器中，则加载进来；未选中的checkbox，需要判断，若原来在id容器中，则需要删除；
在页⾯完全加载完毕后，界⾯中checkbox与拼接的id字符串容器进⾏⽐较，若在字符串容器中，在checkbox⾃动勾选。

否则为false。

提⽰说明：
因为本思路是把拼接的id作为字符串，则在js中获取action中的选中的id字符串时，需要注意语法。

思路实现代码如下：
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函数未定义，则有可能是函数名与标签定义的函数不相同。

若是某个js函数中某个语句中某个字符未定义，则会明确提⽰未定义的字符。