欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

checkbox 全选反选

程序员文章站 2022-06-01 13:16:18
...

html:

<div>

 <p>
	 <input type="checkbox" name="checkbox" id="all">all
	 <br>
	 <input type="checkbox" name="checkbox1" class="subcheck">A
	 <input type="checkbox" name="checkbox1" class="subcheck"> B
	 <input type="checkbox" name="checkbox1" class="subcheck">C
 </p>

 <p>
	 <input type="checkbox" name="checkbox1" class="subcheck">D
	 <input type="checkbox" name="checkbox1" class="subcheck">E
	 <input type="checkbox" name="checkbox1" class="subcheck">F
 </p>
</div>

 

 

 

script:

 

 

$(function(){

	$("#all").click(function(){
		if($(".subcheck:checked").length > 0){
			$(".subcheck").each(function(){
				$(this).prop("checked",false);
			})
			$(this).prop("checked",false);
		}else{
			$(".subcheck").each(function(){
				$(this).prop("checked",true);
			})
			$(this).prop("checked",true);
		}
		//alert($(".subcheck:checked").length);
	
	})

	$(".subcheck").click(function(){
		//alert($(".subcheck:checked").length);
		if($(".subcheck:checked").length > 0 && $(".subcheck:checked").length < $(".subcheck").length){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =true;
		}else if($(".subcheck:checked").length == 0){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =false;
			$("#all").prop("checked",false);
			
		}else if( $(".subcheck:checked").length == $(".subcheck").length){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =false;
			$("#all").prop("checked",true);
		}
	
	})

	
});