每页展示固定条数据的单选本页选择和全选的逻辑及js代码实现

来源：互联网发布：淘宝怎么完成实名认证编辑：程序博客网时间：2024/05/30 21:59

逻辑：

1.全选：勾选时，本页勾选，单选全部勾选；取消勾选时，本页取消勾选，单选全部取消勾选

2.本页：勾选时，单选全部勾选，若勾选总数等于查询结果总数，全选也勾选；取消勾选时，本页全部取消勾选，全选取消勾选

3.单选：勾选时，判断已勾选条数，若等于本页总数，则本页勾选，若等于查询结果总数，则全选勾选；取消勾选时，本页取消勾选，全选取消勾选

变量：

1.selecteAll 全选标记

2.needContactsIds 已选择项

代码：

function bindCheckbox(){//翻页清除本页选择$('#selectAllByPage').removeAttr("checked");//列表总数totalRecords = Number($('#totalRecords').html());//翻页之后的全选if(selectAll){$('#selectAllByPage').prop("checked",true);$('#contactsView input').prop("checked",true);needContactsIds = ",";}//点击全选$('#selectAll').bind("click",function(){if($(this).is(":checked")){//选中selectAll = true;//全选标记$('#selectAllByPage').prop("checked",true);$('#contactsView input').prop("checked",true);}else{selectAll = false;$('#selectAllByPage').removeAttr("checked");$('#contactsView input').removeAttr("checked");}needContactsIds = ",";// 已选文件无记录});//点击分页全选$('#selectAllByPage').bind("click",function(){if($(this).is(":checked")){//选中$.each($('#contactsView input'),function(i,v){$(v).prop("checked",true);var key = $(v).attr("id");if(needContactsIds.indexOf(','+key+',') < 0){needContactsIds = needContactsIds + key + ',';}});var contactsArray = needContactsIds.split(",");if((contactsArray.length-2) == totalRecords){selectAll = true;$("#selectAll").prop("checked",true);needContactsIds = ",";}}else{$("#selectAll").removeAttr("checked");selectAll = false;$.each($('#contactsView input'),function(i,v){$(v).removeAttr("checked");var key = $(v).attr("id");if(needContactsIds.indexOf(','+ key +',')>-1){needContactsIds = needContactsIds.replace(','+key+',',',');}});}});//点击普通checkbox$('#contactsView input').bind("click",function(){if($(this).is(":checked")){var key = $(this).attr("id");if(needContactsIds.indexOf(','+key+',') < 0){needContactsIds = needContactsIds + key + ',';}var contactsArray = needContactsIds.split(",");//每页显示的数量if((contactsArray.length-2) == $('#contactsView input').length){$("#selectAllByPage").prop("checked",true);}if((contactsArray.length-2) == totalRecords){selectAll = true;$("#selectAll").prop("checked",true);$("#selectAllByPage").prop("checked",true);needContactsIds = ",";}}else{var key = $(this).attr("id");if(needContactsIds.indexOf(','+key+',') > -1){needContactsIds = needContactsIds.replace(','+key+',',',');}//其它已选中需添加到变量，避免全选再取消单选needContactsIds无内容$.each($('#contactsView input'),function(i,v){if($(this).is(":checked")){var key = $(this).attr("id");if(needContactsIds.indexOf(','+key+',') < 0){needContactsIds = needContactsIds + key + ',';}}});$("#selectAll").removeAttr("checked");$("#selectAllByPage").removeAttr("checked");selectAll = false;}});}

0 0