使用js实现分页列表复选框勾选

使用JS实现分页列表复选框的勾选

功能包含：切换下一页，保留上一页的勾选；返回上一页自动显示勾选状态。

HTML结构

<input type="checkbox" onchange="checkData(this)" id="checkbox_${user.id}" value="${user.id }" data-am-ucheck>

JS代码

此代码，在复选框勾选状态切换时调用

//保存勾选的id
var userIds = []
function checkData(em){
	//获取id
    var value = em.value
    //查看是否保存过当前勾选的id
    var index = userIds.indexOf(value)
    //判断是否勾选
    if(em.checked){
        if(index==-1){
            //将勾选id保存到数据
            userIds.push(value)
        }
    }else{
        if(index!=-1){
        	//将勾选id从数组删除
            userIds.splice(index,1)
        }
    }
}

此代码，在Ajax切换分页完成后调用

function goPageAjaxCallback(){
    $("[id^='checkbox_']").each(function(){
        if (userIds.includes($(this).val())) {
            $(this).prop('checked',true)
        }
    })
}