js实现全选、全不选、反选(按钮和复选框)

 

<input type="checkbox" id="yesOrNo" onclick="yesOrNo()"/>全选和全不选
	<br/>
	
	<input type="checkbox" name="check" onclick="check1()"/>足球
	<input type="checkbox"  name="check" onclick="check1()"/>篮球
	<input type="checkbox" name="check" onclick="check1()"/>排球
	<br/>
	
	<input type="button" value="全选" onclick="checkAll();"/>
	<input type="button" value="全不选" onclick="notCheckAll();"/>	
	<input type="button" value="反选" onclick="notCheck();"/>

1.实现‘全选和全不选’复选框的功能：

<1>.实现当所有复选框选中时，‘全选和全不选’也呈现选中状态;当所有复选框没有选中时，‘全选和全不选’也呈现不选中状态。

function check1(){
			var yesOrNo=document.getElementById("yesOrNo");
			var 	checkLength=check.length;
			var sum=0;
			var check=document.getElementsByName("check");

			for(var i=0;i<check.length;i++){
				if(check[i].checked==true){
					sum++;
				}
			}
			if(sum==checkLength){
				yesOrNo.checked=true;
			}else{
				yesOrNo.checked=false;
			}
		}

  <2>.实现点击‘全选和全不选’复选框实现全选/全不选。

function yesOrNo(){
			var yesOrNo=document.getElementById("yesOrNo");
			if(yesOrNo.checked==true){
				checkAll();
			}else{
				notCheckAll();
			}
			
		}

2.实现全选、全不选、反选按钮的操作：

	var check=document.getElementsByName("check");
		//全选
		function checkAll(){
			for(var i=0;i<check.length;i++){
				check[i].checked=true;
			}
			check1();
		}
		//全不选
		function notCheckAll(){
			for(var i=0;i<check.length;i++){
				check[i].checked=false;
			} 
			check1();
		}
		//反选
		function notCheck(){
			for(var i=0;i<check.length;i++){
				check[i].checked=!check[i].checked;
			}
			check1();
		}

3.代码：

<script type="text/javascript">
		var check=document.getElementsByName("check");
		//全选
		function checkAll(){
			for(var i=0;i<check.length;i++){
				check[i].checked=true;
			}
			check1();
		}
		//全不选
		function notCheckAll(){
			for(var i=0;i<check.length;i++){
				check[i].checked=false;
			} 
			check1();
		}
		//反选
		function notCheck(){
			for(var i=0;i<check.length;i++){
				check[i].checked=!check[i].checked;
			}
			check1();
		}
		//实现全选和全不选
		function yesOrNo(){
			var yesOrNo=document.getElementById("yesOrNo");
			if(yesOrNo.checked==true){
				checkAll();
			}else{
				notCheckAll();
			}
			
		}
		
		//当选择复选框时：和“全选和全不选”相关联
		 function check1(){
			var yesOrNo=document.getElementById("yesOrNo");
			var 	checkLength=check.length;
			var sum=0;
			for(var i=0;i<check.length;i++){
				if(check[i].checked==true){
					sum++;
				}
			}
			if(sum==checkLength){
				yesOrNo.checked=true;
			}else{
				yesOrNo.checked=false;
			}
		}
	</script>