JQ单选，反选，翻页选择保留数据（附源码）

<thead>
	<tr>
		<th width="40">
			<input type="checkbox" id="selectAllAndInvert"/>
		</th>
		<th width="40">序号</th>
		<th width="100">题目名称</th>
		<th width="80">题目类型</th> 
		<th width="100">操作</th>
		<th width="100">操作</th> 
	</tr>
</thead>
<tbody>
 
<?php foreach($rows as $key => $val){ ?>
	<tr>
		<td width="40">
			<input type="checkbox" name="checked_id[]" value="<?php echo $v['id']; ?>"  id="selectAllAndInvert"/>
		</td > 
	</tr>
 <?php } ?>
</tbody>

 <script>
 //全选，反选，单项选择复选框 翻页后数据回显。获取缓存，缓存里面有的话，循环缓存的值，把对应的 值的福悬空状态改变
    var selectAllInvert = getSessionStorage();
    if(selectAllInvert) {
        selectAllInvert = JSON.parse(selectAllInvert);
        $.each(selectAllInvert, function (key, val) {
            $("input:checkbox[value="+val+"]").attr('checked','true');
        });
    }
	$('#selectAllAndInvert').click(function(){
		$('input[name="checked_id[]"]').each(function(i,v){
			this.checked = !this.checked;
		})
	})
//调用ID的方法
    function getQuestionsId(type = 1){
        var questionId  = [];
        if(type == 1){
            $('input[name="checked_id[]"]:checked').each(function(){
                questionId.push($(this).val());
            })
        }else {
            $('input[name="checked_id[]"]').each(function(){
                if(!this.checked){
                    questionId.push($(this).val());
                }
            })
        }
        return questionId;
    }

    function getSessionInfoData (obj) {
        var selectAllInvert = getSessionStorage();
        var questionId = obj ? obj.value : getQuestionsId();
        if(selectAllInvert){
            selectAllInvert = JSON.parse(selectAllInvert);
            setSessionStorage(JSON.stringify(selectAllInvert.concat(questionId)));
        }else{
            setSessionStorage(JSON.stringify(getQuestionsId()));
        }
    }
    // 获取缓存，判断缓存里面是否有值，缓存里面没有值，就表示第一次添加，直接把勾选的信息存到缓存
    // 反选的时候：
    // 1.获取缓存里面的值，
    // 2.获取选中的值，
    // 3.在获取未选中的值，
    // 先把缓存里面的值 和选中的值合并 在减去未选中的值，就是剩下的值。
    function selectAllAndInvert(obj) {
        $('input[name="checked_id[]"]').each(function (){
            this.checked = !this.checked;
        });
        var selectAllInvert = getSessionStorage();
        if(selectAllInvert){
            selectAllInvert = JSON.parse(selectAllInvert);
            var selected = selectAllInvert.concat(getQuestionsId());//合并选中的值，和缓存里面的值
            var uncheck = getQuestionsId(2);//未选中的值
            for (var i = 0; i < uncheck.length; i++) {
                // 判断选中
                var index = selected.indexOf(uncheck[i]);
                if(index >= 0){
                    selected.splice(index,1);
                }
            }
            setSessionStorage(JSON.stringify(selected));
        }else{
            setSessionStorage(JSON.stringify(getQuestionsId()));
        }
    }

    // 单个选中 和 单个取消勾选
    function singleCheckboxSelection(obj) {
        if(obj.checked){
            getSessionInfoData(obj);
        }else{
            let selectAllInvert = getSessionStorage();
            if(selectAllInvert){
                selectAllInvert = JSON.parse(selectAllInvert);
                let index = selectAllInvert.indexOf(obj.value);
                if(index >= 0){
                    selectAllInvert.splice(index,1);
                    setSessionStorage(JSON.stringify(selectAllInvert));
                }
            }
        }
    }
	// 利用浏览器缓存 实现翻页后 保留数据 和 数据回显
	 let sessionStorageKey = 'questionBatchSelection';
    // 获取浏览器缓存
    function getSessionStorage() {
        return sessionStorage.getItem(sessionStorageKey);
    }
    //设置 浏览器缓存
    function setSessionStorage(value){
        sessionStorage.setItem(sessionStorageKey,value);
    }
    //删除 浏览器缓存
    function removeSessionStorage(){
        sessionStorage.removeItem(sessionStorageKey);
    }
</script>