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

abcd23212年前前端开发1315

使用的技术

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


相关文章

flex布局设置单个子元素靠右

父元素设置了flex 布局display: flex; align-items: center;如何让某个子元素靠右呢?方法一flex: 1; text-a...

iframe背景透明设置方法

iframe的背景颜色在IE下为window的当前窗口颜色(默认白色,可以在显示外观处对其进行设置),这导致在大幅背景上插入iframe时,需要给它“透底”,可是IE不支持对iframe设置背景色,那...

HTML5实现网页的全屏切换

使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下://进入全屏     func...

背景图片靠右对齐,并且间距从右算起

假如右边有个小箭头需要右对齐并且垂直居中,可以写成 background:url("images/icon.png")no-repeat right center;如果需要离右边1...

css来控制img正方形自适应

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

移动端自适应Rem自适应js

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

发表评论    

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