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

最新推荐文章于 2021-06-03 04:30:21 发布

原创最新推荐文章于 2021-06-03 04:30:21 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#单选全选本页 js

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文详细阐述了实现每页数据全选和单选功能的逻辑，包括全选按钮勾选时如何影响本页及单选项，本页选项变化时如何影响全选和单选，以及单选项的勾选状态对全选和本页的影响。同时，提到了两个关键变量：全选标记`selectAll`和已选择项`needContactsIds`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

逻辑：

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