knockoutjs对复选框赋值导致的去到另一页面后，再history.back()回退所有复选框被选中问题的解决

近日遇到一个问题。在做网站开发时一个页面使用了knockoutjs对一系列复选框进行赋值。然后在会员勾选一部分复选框后会跳到另一个页面。但是当会员按浏览器的回退按钮时，却出现了回退后的页面中所有复选框被选中的问题。出错代码如下：

1 2 3 4 5 6

< div  class = "col-md-12 border"  data-bind = "foreach:smallSortVM"  style = "overflow-y:scroll;" >              < div  style = "margin-top: 15px;" >                  < input  name = "chk"  type = "checkbox"  data-bind = "attr:{value:gid}"   />                  < span  data-bind = "text:name" ></ span >              </ div >          </ div >

刚开始以为是浏览器的缓存问题，清缓存，问题依旧，换浏览器，问题仍然依旧。最后把视线移到knockoutjs绑定上。把knockoutjs绑定去除掉。只是手写了几个html复选框，然后进行操作，跳到另一个页面，再回退，没这个问题了。看来是knockoutjs checkbox绑定的问题。因为觉得是这里的问题，我在传值的时候增加了一个checked绑定，统一赋初值false.修改后的代码如下：

1 2 3 4 5 6

< div  class = "col-md-12 border"  data-bind = "foreach:smallSortVM"  style = "overflow-y:scroll;" >              < div  style = "margin-top: 15px;" >                  < input  name = "chk"  type = "checkbox"  data-bind = "attr:{value:gid},checked:isCheck"   />                  < span  data-bind = "text:name" ></ span >              </ div >          </ div >

这跳到另一页面，然后按回退按钮，不会全选了。但是仍然有问题，因为它一个也不选了。而我们知道，当按回退按钮时，正常情况下，你当时选中什么，回退后还会保留这个选中的。读knockoutjs的说明文档，找不到解决办法。但是看到了这样一段对checkbox绑定的说明：

For checkboxes, KO will set the element to be checked when the parameter value is true, andunchecked when it is false. If you give a value that isn’t actually boolean, it will be interpreted loosely. This means that nonzero numbers and non-null objects and non-empty strings will all be interpreted as true, whereas zero, null, undefined, and empty strings will be interpreted asfalse

这段话的意思是对于复选框，KO会当参数值为true时设置为选中，否则设置为未选中。如果你给的值不是实际意义的bool值，KO会自行进行一个宽泛的解析。这意味着非零数，非null对象及非空字符串都会被解析为true，其他的情况会被解析为false.但是，实际我进行的测试显示，即使这个复选框我不赋值，在后退的时候它仍然会被选中。看来这是一个knockoutjs的bug。用knockoutjs是解决不了了。我想到了javascript的cookie。在提交前存被选中的项到cookie，然后后退的时候重新赋复选框的值。这样应该能够解决。思路有了，接着就是写代码。

在跳转到另一个页面前进行这样得处理：

//被选中项保存为cookie值
$.cookie("checkeds",arr.join());
其中arr.join()是被选中项的字符串。
然后在此页面knockoutjs绑定成功后进行这样得处理：
 
 

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
     
     

      
      8
     
     
     
     

      
      9
     
     
     
     

      
      10
     
     
     
     

      
      11
     
     
     
     

      
      12
     
     
     
     

      
      13
     
     
     
     

      
      14
     
     
     
     

      
      15
     
     
     
     

      
      16
     
     

     
     

      
      
 
       //根据保存的cookie，在history.back()后退时重新给checkbox赋值 
      
      
      
 
                           
       var 
       checkeds=$.cookie( 
       "checkeds" 
       ); 
      
      
      
 
                           
       if 
       (!$.IsNullOrEmpty(checkeds)) { 
      
      
      
 
                               
       var 
       arr=checkeds.split( 
       ',' 
       ); 
      
      
      
 
                               
       $( 
       "input[name='chk']:checkbox" 
       ).each( 
       function 
       (index) { 
      
      
      
 
                                   
       var 
       self=$( 
       this 
       ); 
      
      
      
 
                                   
       $.each(arr, 
       function 
       (index,item) { 
      
      
      
 
                                       
       if 
       (item==self.val()) { 
      
      
      
 
                                           
       self.prop( 
       "checked" 
       , 
       true 
       ); 
      
      
      
 
                                           
       return 
       ; 
      
      
      
 
                                       
       } 
      
      
      
 
                                   
       }); 
      
      
      
 
                               
       });   
      
      
      
 
                           
       } 
      
      
      
 
                           
       $.cookie( 
       "checkeds" 
       , 
       null 
       ); 
      
      
      
 
                           
       //根据保存的cookie，在history.back()后退时重新给checkbox赋值 
      
     
     
这样就解决了。
在重新赋值后调用
$.cookie("checkeds",null);
清空cookie

​