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

来源：岁月联盟编辑：exp 时间：2012-07-04

在项目中有需求如下：上下分页后，选中的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容器：

[html]
String ids= (String)request.getAttribute("ids");
if((ids==null)){
ids="";
}
   String ids= (String)request.getAttribute("ids");
    if((ids==null)){
  ids="";
    }
     js代码：上一页函数：

[javascript] view plaincopyprint?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();
    }

}
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代码如下：

[javascript]
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;
                   }
           }
    }
}
}
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;
        }
      }
  }
}
}
     说明：在做测试时，但是一直提示，函数未定义，不仅提示下页函数未定义，凡是界面上所有的按钮全部提示未定义。所以纠结了很长时间。解决后，拿出分享下。