本文共 1920 字，大约阅读时间需要 6 分钟。

1. 需求：在页面中复选框点击选中后，页面刷新或者关闭重新打开，选中的复选框依然是选中状态
2. 开发思路：建立一个数组存放被选中的checkbox的id，将数组放到cookie中存储，复选框选中则往数组中加一个id，取消选中则从数据中删除该id,页面加载时从cookie中取出数组，根据数组中存储的id将checkbox的value值等于id的设置为勾选状态，批量操作时将批量操作的id从数据中删除，单条记录提交成功后也从数组中删除id
3. html代码引用cookie.js：

   
    
    全选    
    
   

1. js代码

//存储选中的id,flag=true新增，flag=false删除function setSettleChecks(settleId,flag) {    //debugger;    var settleChecksArr=Cookies.getJSON('settleChecks') || []    if(flag && $.inArray(settleId,settleChecksArr)<0){        settleChecksArr.push(settleId)    }else if(!flag){        settleChecksArr.splice($.inArray(settleId,settleChecksArr),1);    }    Cookies.set("settleChecks",settleChecksArr)    console.log("settleChecks:"+Cookies.getJSON("settleChecks"));}//删除已经提交成功的id（批量操作时将批量操作的id从cookies中删除）function deleteSettleChecksByIds(ids) {    //debugger    for(var i=0;i
   
    -1){            $(this).prop("checked",false);        }    })}//进入页面或者刷新页面时加载选中的checkboxfunction loadSettleChecks() {    var settleChecksArr=Cookies.getJSON('settleChecks') || [];    var $fruits = $("input[name='fruit']");    $fruits.each(function () {        if($.inArray($(this).val(),settleChecksArr)>-1){            $(this).prop("checked",true);        }    })    //全选复选框设置选中或者不选中    $("#all").prop("checked" , ($fruits.length == $fruits.filter(":checked").length &&  $fruits.length>0) ? true :false);}// 全选复选框点击事件$('#settle-batch').on('click','#all',function () {    $("input[name='fruit']").prop("checked", this.checked);    $("input[name='fruit']").each(function () {        setSettleChecks($(this).val(),this.checked);    })})//checkbox点击事件$(document).on('click',"input[name='fruit']",function () {    setSettleChecks($(this).val(),$(this).is(':checked'));})
   

转载地址：http://oqddi.baihongyu.com/