用jquery实现全选/全部选功能(jquery-1.9.x 版本以上)，使用 prop 属性

最新推荐文章于 2026-05-04 06:41:28 发布

翻译最新推荐文章于 2026-05-04 06:41:28 发布 · 762 阅读

Web前端开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用jQuery轻松实现复选框的全选、全不选及反选功能，包括代码实现和使用场景说明。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkBox</title>
<script src="jquery-1.11.1.js"></script>	
<script language="javascript" type="text/javascript">
	$(function () { 
		//全选或全不选 
		$("#all").click(function(){    
			if(this.checked){    
				$("#list :checkbox").prop("checked", true);   
			}else{    
				$("#list :checkbox").prop("checked", false); 
			}    
		 });  
		//全选   
		$("#selectAll").click(function () { 
			 $("#list :checkbox,#all").prop("checked", true);   
		});   
		//全不选 
		$("#unSelect").click(function () {   
			 $("#list :checkbox,#all").prop("checked", false);   
		});   
		//反选  
		$("#reverse").click(function () {  
			 $("#list :checkbox").each(function () {   
				  $(this).prop("checked", !$(this).prop("checked"));   
			 }); 
			 allchk(); 
		}); 
		  
		//设置全选复选框 
		$("#list :checkbox").click(function(){ 
			allchk(); 
		}); 
	   
		//获取选中选项的值 
		$("#getValue").click(function(){ 
			var valArr = new Array; 
			$(":checkbox[name=checkboxBtn]:checked").each(function(i){ 
				valArr[i] = $(this).val(); 
			});
			//$("#list :checkbox[checked]").each(function(i){ 
			//	valArr[i] = $(this).val(); 
			//}); 
			var vals = valArr.join(','); 
			  alert(vals); 
		}); 
	});  
	function allchk(){ 
		var chknum = $("#list :checkbox").size();//选项总个数 
		var chk = 0; 
		$("#list :checkbox").each(function () {   
			if($(this).prop("checked")==true){ 
				chk++; 
			} 
		}); 
		if(chknum==chk){//全选 
			$("#all").prop("checked",true); 
		}else{//不全选 
			$("#all").prop("checked",false); 
		} 
	}
</script>
<body>

	<ul id="list">   
	   <li><label><input type="checkbox" name="checkboxBtn" value="1"> 1.我是记录来的呢</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="2"> 2.哈哈，真的太天真了</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="3"> 3.爱上你是我的错吗？</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="4"> 4.从开始你就不应用爱上我</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="5"> 5.喜欢一个人好难</label></li> 
	   <li><label><input type="checkbox" name="checkboxBtn" value="6"> 6.你在那里呢</label></li> 
	</ul> 
	<input type="checkbox" id="all"> 
	<input type="button" value="全选" class="btn" id="selectAll">   
	<input type="button" value="全不选" class="btn" id="unSelect">   
	<input type="button" value="反选" class="btn" id="reverse">   
	<input type="button" value="获得选中的所有值" class="btn" id="getValue">
    

</body>
</html>