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