翻页时保存checkbox的值

本文介绍了一种使用Cookie来记录和管理网页上复选框选中状态的方法。通过遍历Cookie中的值并更新其内容,确保了复选框状态能够被正确地保存和恢复。

参考自:
http://blog.youkuaiyun.com/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。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值