翻页时保存checkbox的值

痛定思痛。 2022-06-08 14:22 145阅读 0赞

参考自：  
[http://blog.csdn.net/qq\_33142257/article/details/58613180][http_blog.csdn.net_qq_33142257_article_details_58613180]  
原博客提供的思路如下：  
主要就是利用cookie：  
每次点击checkbox触发事件的时候都先解析出cooki中的值，至于存的一个数组，这样是方便对这些值的管理；  
1、先遍历这个数组，把当前选中的这个checkbox的值从当前cookie中去除，这样方便加入，否则你在判断的时候当前是选中状态，然后又把这个值存进去，导致重复，这样不严谨；  
2、判断当前是否选中，不选中则不做任何操作，选中的话，则将当前值存入数组；  
3、最后将整理好的数组存入cookie；

> 直接使用原博客的语句，第一次是报错： `$.cookie is not a function`，通过引入jquery.cookie.js解决了。 然后又报了一个`Cannot read property 'split' of undefined` 的错误，估计是因为`$.cookie("checkValue")` 这个取cookie中字段值的方法有问题。或者是因为没有在cookie中建立这个这个字段。

修改后，语句调整为：

$(function(){ 
                    //判断cookie是否存在，不存在则创建cookie，有效期1天
                    if($.cookie("checkValue")==undefined) {
                        $.cookie('checkValue','', { expires: 1 });
                    } else {
                      //勾选cookie中保留的项
                      var checkedItem = $.cookie("checkValue").split(",");
                      checkedItem.forEach(function(item,index) { 
                        $("input[name='chooseOne']").each(function () { 
                            if($(this).val()==item) {
                                $(this).attr('checked', true);
                            }
                        });
                      });
                    }
    
    
                    /*复选框选中的值存入cookie*/
                    $("input[name='chooseOne']").click(function(){ 
                        /*先不管这个checkbx在不在cookie中，遍历数组去掉当前这个值*/
                        var val = $(this).val();
                        var array = $.cookie("checkValue").split(",");
                        array.forEach(function(item,index){ 
                            if(val==item){
                                array.splice(index,1);
                            }
                        });
                        /*判断当前的checkbox是不是选中，选中的话在将这个值加进去*/
                        if($(this).attr('checked')){
                            array.push($(this).val());
                        }
                        /*最后把处理完的值存入cookie*/
                        $.cookie("checkValue",array);
                        console.log($.cookie("checkValue"));
                    });
                });

后期需要注意的问题是：设置cookie有效期一定。进入其它页面时自动删除cookie。

[http_blog.csdn.net_qq_33142257_article_details_58613180]: http://blog.csdn.net/qq_33142257/article/details/58613180