翻页时保存checkbox的值

参考自:
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。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值