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

abcd23212年前前端开发1247

使用的技术

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


相关文章

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

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

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

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

滚动条触动css动画效果——scrollreveal.js

滚动条触动css动画效果——scrollreveal.js

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom<div class="img-b...

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

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

移动端自适应Rem自适应js

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

发表评论    

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