jquery（zepto）保存checkbox状态

问题描述：

目前在做一个人员管理功能，要从用户表里面进行多选，最后将选中的用户拼接为字符串返回

（用户也不是很多大概五千吧，不妙的地方在于，这是H5站点…..）

 

存在以下几种情况，因此checkbox选择必须保存

（1）搜索

（2）分页

（3）页面跳转

其实都是初始化的问题吧=_=

 

读取人员列表大概是这样的流程

 

其实用的是zepto（因为采用了SUI框架），但我当jq写的，无差别

 

查了一下有好几种方法

1.cookie

2.localstorage

3.隐藏域

 

但是localstorage试了之后不成功（我没学会），后来采用了在搜索前保存但一样有点问题

于是我用了下面这种也许不是很聪明的方法

没有用到隐藏域或localstorage

---

解决方案：

1.在js中创建俩全局变量

（1）数组selected，存选中的人员

（2）字符串users，人员列表（其实是selected用英文逗号拼接一下），方便在页面间传

同时，页面初始化时判断上个页面传过来的users是否为空，不为空的话把字符串转为数组，存在selected里面

selected=users.split(",");

 

2.input的value设为用户id

<input  type="checkbox" name="checkbox" onclick="clickIt(this)" value="'+result.data.list[i].id+'">

 

3.每次点击checkbox，把id加到selected数组中，取消时将该id去除

function clickIt(checkbox){
        var $thisObj=$(checkbox);
        var v=$thisObj.val();
        if (checkbox.checked == true){
        //Action for checked
            if($.inArray(v,selected)==-1){
                selected.push(v);
            }
        }else{
        //Action for not checked
            for(var i=0;i<=selected.length-1;i++){
                if(sel[i]==v){
                    selected.splice(i,1);
                }
            }
        }

    }

 

4.每读取新的一页时，判断是否有id与selected中重合，若有则设为选中

function reselect() {
    $("input[type='checkbox']").each(function(){
        var v=$(this).val();
        if ($.inArray(v,selected)!=-1){
            $(this).prop("checked",true);
        }
    });
}

 

5.跳转时将selected拼接成字符串users，利用ajax传回人员管理页，如果要调回来，把这个字符串传过来，

users=selected.join(",");

 

大概是这样吧。

 

我其实非常担忧安全性

 

可能用localstorage，session什么的要好一点，但完全来不及去学了

 

 

---

参考：

[1]jq:翻页时，保存上页多选框checkbox选中状态来自 <https://www.cnblogs.com/echoppy/p/6689986.html>

[2]js数组与字符串的相互转换来自 <https://www.cnblogs.com/LeoBoy/p/5899734.html>