如何做一个翻页后还能选中选择框的列表

---

如何做一个翻页后还能选中选择框的列表

前言：产品那边要求，要做个列表，已经选中过的数据要打上勾。

---

提示：以下是本篇文章正文内容，下面案例可供参考

产品现在要想点击 请选择成员

后弹出这个页面，翻页也要选中

先贴代码
首先这个为点击事件，也就是申报工作室–第一个页面的代码

此处传的话吧id和名字都传过去另一个页面，
其实只需要传id就可以了，不过我这么做是不想再用选择器再找名字所以吧名字也传过去了

 // 选择成员,此处传的话吧id和名字都传过去
    function memberChoose(Str,teacherType){
        let hasSelIds = $("#member-id").val();
        let hasSelNames = $("#member-name").text();
        debugger
        userChooseIndex = layer.open({
            type: 1,
            title: Str,
            area:['960px','680px'],
            content:$.ajaxSubmitValue("${ctx}/teacher/studioChoose/noskin/chooseUserBatch.do?callback="
                +teacherType+"&hasSelIds="+hasSelIds+"&hasSelNames="+hasSelNames)
        })
    }
    //选择成员回调
    function chooseLearnSchoolMember(memberId,memberName){
        // 不可选择主持人即当前用户
        if(memberId.indexOf('${loginUser.id}') != -1){
            return layer.msg("成员不能为主持人！");
        }

        $("#member-id").val(memberId);
        $("#member-name").text(memberName);
        layer.close(userChooseIndex);
    }

接着到第2、3张图，成员列表的页面
此处先使用 <input type="hidden 标签来放置传过来的id和名字

以下是js代码

// 这两个变量很重要，用来装传过来的id和名字的
	var teachersName=[];
	var teachersId = [];
$(function(){
		// 初始化函数让指定选中框选中
		if($("#teachersId").val() != ''){
			let hasSelIds = '${param.hasSelIds}';
			teachersId = hasSelIds.split(",");
			teachersId.forEach(v => {
				$("input[type='checkbox'][value='"+v+"']").prop("checked",true);
			})
		}
		if($("#teachersName").val() != ''){
			let hasSelNames = '${param.hasSelNames}';
			teachersName = hasSelNames.split(",");
		}

	})
var totalSize = $("#totalSize").val();
	var limit = ${searchParam.pagination.limit};
	var totalPage = totalSize/limit;
	//分页器
	laypage({
	  cont: 'pageTeacher',//分页容器的id
	  pages: totalPage, //总页数
	  curr: ${searchParam.pagination.page}, //当前页
	  skin: 'yahei',  //当前页的颜色
	  jump:function(e,first){
		  if(!first){
			  $("#pagination").val(e.curr);
			// 分页这里是根据formId来发表单过去的
			// 所以上面才将传来的id和名字放在input组件里
			$("#tutorLayer").html($.ajaxSubmit('${formId}'));
			
		  }
	  }
	});


// 选择成员，这里掉的传来的回调函数
	function chooseTeacher(){
		${callback}(teachersId,teachersName);
	}

以下是比较重点的，由于你是要翻页后还能选到，所以不能够再判断哪个框选中后才是要的数据（即判断 $(selector).find[input[type=‘checkbox’]:checked)
），因为翻页后第二页的数据可能选中框没打勾，

所以这里改变思路,看到上面设置的全局变量teachersId、teachersName了么?就是用来装id和名字的，然后每次点击选中框都会判断时候有选中，选中就往这个数组加东西，不选中就减东西

$("input[type='checkbox']").on("change",function(){
		// 使用这种办法跨页选中
		if($(this).prop("checked")){
			teachersName.push($(this).parent().next().text());
			teachersId.push($(this).val());
		}else{
			teachersName.splice(teachersName.indexOf($(this).parent().next().text()),1);
			teachersId.splice(teachersId.indexOf($(this).val()),1);
		}

		// 给input重新赋值，方便传递下一页
		$("#teachersId").val(teachersId);
		$("#teachersName").val(teachersName);
	})

完成！