实现checkbox 翻页后,仍保持选中状态

abcd23211年前前端开发926

使用的技术

localStorage.setItem(key,val);

localStorage.getItem(key);

<input type="checkbox" value="1" name="ids" onclick="save_storage(this)"/>小明
<input type="checkbox" value="2" name="ids" onclick="save_storage(this)"/>小李
<input type="checkbox" value="3" name="ids" onclick="save_storage(this)"/>小王

选中时存value,不选时移除value的js方法

//存或减选中的值
        function save_storage(obj) {
            var val=$(obj).val();
            var select_ids=localStorage.getItem('select_ids');
            if($(obj).prop("checked")){
                //选中时,加上里面的值
                if(select_ids!=null){
                    if(select_ids.indexOf(val)==-1){
                        localStorage.setItem('select_ids',select_ids+','+val);
                    }
                }else{
                    localStorage.setItem('select_ids',val);
                }
            }else{
                //不选中是去掉里面的值
                if(select_ids.indexOf(val)!=-1){
                    var temp=select_ids.replace(','+val,'');
                    localStorage.setItem('select_ids',temp);
                }
            }
        }

每一次翻页(刷新)时,选中checkbox的js方法

//设置选中
function set_select() {
            var select_ids=localStorage.getItem('select_ids');
            $("input[name='ids']").each(function (i,o) {
                var val=$(o).val();
                if(select_ids.indexOf(val)!=-1){
                    $(o).prop("checked",true);
                }
            });
}

使用ready方法设置每次翻页时(刷新),都执行该方法

$(document).ready(function () {
set_select();
});


相关文章

CSS实现单行、多行文本溢出显示省略号(…

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;...

jq动画重复执行的解决方法

1. 在你的点击事件中加上一个判断,假设产生动画效果目标的是div这个节点,那么你要加上这个判断 它会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感...

用JS获取地址栏参数的方法

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)function GetQueryString(name) {      v...

移动端html5手机网站如何定义字体font-family

使用自定义字体时候,很容易像PC端那样定义,其实安卓和ISO系统,对中文字体是不支持,所以定义以后看到效果不是直接定义字体效果,如果需要定义大家会想到 @font-face 定义为微软雅黑字体并存放到...

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,bool...

透明度与十六进制代码转换

透明度参照表:00%=FF(不透明) 5%=F2 10%=E5 15%=D8 20%=CC 25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F 55%=72 60%=6...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。