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

abcd232110个月前前端开发827

使用的技术

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();
});


相关文章

jQuery.raty.js星星评分插件使用

jQuery.raty.js星星评分插件使用

在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。星星显示的效果如下:<script src="js/jquery...

kindeditor编辑器插入mp4视频不显示及不过滤video的方法

传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kind...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

3种方法实现CSS隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。方法1:计...

滚屏加载–无刷新动态加载数据技术的应用

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后 台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其...

移动端自适应Rem自适应js

    当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12p...

发表评论    

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