jquery-cookie复选框翻页时保持选中状态

最新推荐文章于 2024-05-23 11:33:51 发布

置顶海迷539

最新推荐文章于 2024-05-23 11:33:51 发布

阅读量1.8k

点赞数 1

文章标签：复选框刷新保存值

本文链接：https://blog.csdn.net/qq_28353177/article/details/79884890

版权

1、每次刷新页面时读取cookie值赋值给多选框。废话不多说，上代码！

var cookieChoiceId = $.cookie('cookieChoiceId');//获取cookie值
if(cookieChoiceId){
    var cookieChoiceIdArray = cookieChoiceId.split(',');//取出的cookie值是字符串(cookie不支持存数组),先转成数组
    $(".choice").each(function(){
        for(var i=0;i<cookieChoiceIdArray.length;i++){//遍历所有多选框对应值是否存在于cookie,存在选中它
            if($(this).val() == cookieChoiceIdArray[i]){
                　　$(this).attr('checked',true);
            }
        }
    });
}

2、利用cookie，点击复选框时判断当前复选框的值是否存在于cookie，不存在则添加，存在则从cookie删除。

$('.choice').click(function(){
    var me = $(this);
    var cookieChoiceId = $.cookie('cookieChoiceId');//获取cookie值
    if(!cookieChoiceId){
        $.cookie('cookieChoiceId', me.val()+',', { path: "/"});//如果cookie为空,则把当前值存在cookie
    }else{
        var flag = true;//这变量为了区分cookie值里面有没有当前多选框的值
        var cookieChoiceIdArray = cookieChoiceId.split(',');//转化数组
        for(var i=0;i<cookieChoiceIdArray.length;i++){
            if(me.val() == cookieChoiceIdArray[i]){
                flag = false;
                cookieChoiceIdArray.splice($.inArray(me.val(),cookieChoiceIdArray),1);//如果当前多选框值在cookie里面,删除它
            }
        }
        if(flag){//如果cookie里边没有当前多选框值，则添加进去
            cookieChoiceId = cookieChoiceId + me.val()+','
            $.cookie('cookieChoiceId', cookieChoiceId, { path: "/"});
        }else{//如果有的话,上面已经做了删除处理,把新的数组转成字符串,在存进去。
            cookieChoiceId = cookieChoiceIdArray.join(',');
            $.cookie('cookieChoiceId', cookieChoiceId, { path: "/"});
        }
    }
})