解决分页翻页多选框选中的数据丢失问题

问题：

分页翻页的时候上一页选中的多选框消失，想要的结果：选中下一页多选框再返回上一页的时候多选框不消失

解决思路：

解决分页翻页多选框选中的数据丢失问题的中心思想就是，找个地方存选中的多选框的值，翻页的时候也就是重新加载界面的时候再赋给多选框，存多选框的值可以用隐藏域、cookie、session等存，现在用cookie存的例子。（如果你用的是bootstrap、easyui分页插件的话，网上有更简单的解决办法）

代码实战，一键copy解决问题：

//cookie保存分页文章
<script>
function theSubmit(){

     var checkIds = GetCookie("ArticleId");

     alert(checkIds);

    }
 function SetArticleId(o, i) { 
      if (o.checked) {
       AddCookie(i)
     }
     else {
       RemoveCookie(i)
     } 
   }
    
   function SetCookie(name, value) {
     document.cookie = name + "=" + escape(value); 
   }
   function GetCookie(name) {
     if (document.cookie.length > 0) {
       c_start = document.cookie.indexOf(name + "=");
       if (c_start != -1) {
         c_start = c_start + name.length + 1;
         c_end = document.cookie.indexOf(";", c_start);
         if (c_end == -1) c_end = document.cookie.length;
         return unescape(document.cookie.substring(c_start, c_end));
       }
     }
     return "";
   }
   function AddCookie(i) {
     d = GetCookie("ArticleId");
     if (d == "") d = "|";
     if (d.indexOf("|" + i + "|") == -1) {
           d += i + "|";
           SetCookie("ArticleId", d);
     } 
   }
 
   function RemoveCookie(i) {
     d = GetCookie("ArticleId");
     var reg = new RegExp("\\|" + i + "\\|");
     if (reg.test(d)) {
       d = d.replace(reg, "|");  
       SetCookie("ArticleId", d);
     }     
   }
   $(function(){
    d = GetCookie("ArticleId");
    console.info("ArticleId=",d);
    var check=[];
    check=d.split("|");
    console.info("check=",check);
    check.splice(0,1);
    check.splice(check.length-1,1);
    console.info("check=",check);
    for(var i=0;i<check.length;i++){
    console.info("check[i]=",check[i]);
    $("#"+check[i]).attr('checked','true');
    }
   });

</script>

<table class="table table-condensed table-bordered table-hover" style="margin-bottom:0px;" id="queryTable">
<thead>
<tr>
<th style="width:5%;"><input type="checkbox" />#</th>
<td style="width:10%;">年度</td>
<td style="width:10%;">期次</td>
<td style="width:10%;">总刊号</td>
<td style="width:10%;">目录ID</td>
<td style="width:10%;">目录</td>
<td style="width:25%;">标题</td>
<td style="width:10%;">作者</td>
<td style="width:10%;">精品</td>
<td style="width:10%;">优先级</td>
</tr>
</thead>
<tbody>
<c:forEach var="targetObj" items="${clArticles }"
varStatus="vs">
<tr>
<td><input type="checkbox" name="targetObjId" id="${targetObj.id}" value="${targetObj.id}" onclick="SetArticleId(this,${targetObj.id});"/> ${vs.index+1 }</td>
<td>${targetObj.clDirectory.clClinicalLaboratory.year }</td>
<td>${targetObj.clDirectory.clCli
4000
nicalLaboratory.issue }</td>
<td>${targetObj.clDirectory.clClinicalLaboratory.serialNum }</td>
<td>${targetObj.clDirectory.id }</td>
<td>${targetObj.clDirectory.name }</td>
<td>${targetObj.title }</td>
<td>${targetObj.author }</td>
<td><c:if test="${targetObj.recommend == 0 }">否</c:if>
<c:if test="${targetObj.recommend == 1 }">是</c:if></td>
<td><input type="text" name="priority_${vs.index }" size="5" value="${targetObj.priority }" /></td>
</tr>
</c:forEach>
</tbody>
</table>