分页操作时，点击上一页或下一页，当返回到指定页面时，该页面被选择的复选框任然被勾中

╰+攻爆jí腚メ 2022-07-12 23:17 37阅读 0赞

思路:如果把当前勾选的checkbox对应的数据保存在数组或拼接字符串中，上一页或下一页会刷新页面，保存的值就没了，不能达到刷新页面我们保存的数据依然存在

因此我们可以把相应的数据保存在cookie中，只要浏览器不关闭，我们保存的数据就会存在，可以解决浏览器刷新数据丢失的问题。

解决办法:每一个uid对应唯一的checkbox，当我们选中checkbox时我们就把 这个uid保存在cookie中，取消选中的时候remove掉cookie中的对应uid，当点击上一页或下一页时，在window 窗体onload的时候 获取当前页面的所有checkbox后的uid属性值 array1。通过js的字符串操作把cookie中长的uid转换成数组中array2。通过二次循环，把array1中的每一项和array中的每一项相比较。如果相等。这把this.checked=true(既通过js主动勾选复选框)

页面：

<volist name="data.tlist" id="vo" key="k">  
               <tr class="d\_list  <eq name='vo.is\_yu' value='1'>error\_list</eq>" data-did="\{$vo.uid\}">  
               <td><input type="checkbox" class="mycheckbox"  uid='\{$vo.uid\}'/></td>  
               <td>\{$vo.nickname\}</td>  
               <td>\{$vo.uid\}(\{$vo.str\_vd\})</td>  
               <td>\{$vo.dtype\}</td>  
               <td>\{$vo.str\_level\}</td>  
               <td>\{$vo.price\}</td>  
               <td>\{$vo.separate\}%</td>  
               <td><eq name="vo.is\_bond" value="0">未代缴<else/>已代缴</eq></td>  
               <td>\{$vo.now\_pro\}</td>  
               <td>\{$vo.xwscore\}</td>  
               <td>\{$vo.com\_num\}</td>  
               <td>\{$vo.fire\_num\}</td>  
               <td>\{$vo.thr\_num\}</td>  
               <td>\{$vo.ord\_num\}</td>  
               </tr>  
               </volist>

js:  cookie 操作

//得到选中复选框值  
    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);  
      \}       
    \}   
      
    $('.mycheckbox').click(function()\{  
    var uid=$(this).attr('uid');  
    SetArticleId(this,uid)  
    \})  
      
    $('.sure\_applay').click(function()\{  
    theSubmit();  
    \})  
      
    /\*\*\*页面获取的uid和cookie中获取的uid对比，相等 通过js主动勾选复选框\*\*/  
    window.οnlοad=function()\{  
    var d = GetCookie("ArticleId");  
      if (d != "")\{  
      var str=d.substring(1,d.length-1);  
      var arry=str.split('|');  
      $('.mycheckbox').each(function(i,item)\{  
      var uid=parseInt($(item).attr('uid'));  
      for(var i=0;i<arry.length;i++)\{  
      var did=parseInt(arry\[i\]);  
      if(uid==did)\{  
      $(item)\[0\].checked=true;  
      \}  
      \}  
      \})  
        
      \}  
    \}  
\})(jQuery);

注:该案例中cookie的value值为字符串，本想打算通过js实现一个map 把uid存入到map中。cookie的value中保存map(对象)，不知道能否行的通。