JavaScript实现复选框的全选、全不选和反选操作

JavaScript实现复选框的全选、全不选和反选操作


<html>
	<head>
		<meta charset="utf-8">
		<title>全选全不选操作title>
	head>
	<body>
		<b>请选择你的女朋友:b> 
		<input type="checkbox" id="boxid" onclick="selAllNo()"/>全选or全不选br>
		<input type="checkbox" name="love"/>大乔 
		<input type="checkbox" name="love"/>貂蝉 
		<input type="checkbox" name="love"/>王昭君 
		<input type="checkbox" name="love"/>杨玉环 
		<input type="checkbox" name="love"/>小乔 
		<input type="checkbox" name="love"/>西施 br>
		<input type="button" value="全选" onclick="selAll()"/> 
		<input type="button" value="全不选" onclick="selNo()"/> 
		<input type="button" value="反选" onclick="selOther()"/> 
		<script type="text/javascript">
			//全选操作
			function selAll(){
      
				/*
					1.通过name获取当前所有复选框
						-getElementsByName()
					2.返回数组,遍历数组
						-checked=true 选中
						-checked=false 不选中
					3.得到每一个复选框,为每个复选框属性赋值
				*/
			   var love1=document.getElementsByName("love");
			   for(var i=0;i<love1.length;i++){
      
				   love1[i].checked=true;
			   }
			}
			//全不选操作
			function selNo(){
      
				var love2=document.getElementsByName("love");
				for(var i=0;i<love2.length;i++){
      
					love2[i].checked=false;
				}
			}
			//反选操作
			function selOther(){
      
				/*
					判断复选框属性checked的值
				*/
			   var love3=document.getElementsByName("love");
			   for(var i=0;i<love3.length;i++){
      
				   if(love3[i].checked==true){
      
					   love3[i].checked=false;
				   }else{
      
					   love3[i].checked=true;
				   }
			   }
			}
			//全选or全不选操作
			function selAllNo(){
      
				/*
					1.获取这个复选框
					2.判断这个复选框属性的值
					3.若是true则全选中,否则全部选中
				*/
			   var box1=document.getElementById("boxid");
			   if(box1.checked==true){
      
				   selAll();
			   }else{
      
				   selNo();
			   }
			}
		script>
	body>
html>

你可能感兴趣的:(前端,JavaScript,JS实现复选框的全选,全不选,反选)