DOM查询练习

DDD何

于 2021-08-04 16:22:27 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/a15800585396/article/details/119386972

版权

功能：

1.实现全选、反选、全不选、提交的按钮功能

2.实现checkbox的全选功能

3.按钮功能和checkbox全选的交互对应关系

示意图：

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var cb1=document.getElementById("ab");
				var btn1=document.getElementById("b1");
				btn1.onclick=function(){
					var c1=document.getElementsByName("a1");
					cb1.checked=true;
					for(var i=0;i<c1.length;i++){
						c1[i].checked=true;
					}
				};
				var btn2=document.getElementById("b2");
				btn2.onclick=function(){
					var c2=document.getElementsByName("a1");
					cb1.checked=false;
					for(var i=0;i<c2.length;i++){
						c2[i].checked=false;
					}
				};
				var btn3=document.getElementById("b3");
				btn3.onclick=function(){
					var c3=document.getElementsByName("a1");
					 for(var i=0;i<c3.length;i++){
					 	if(c3[i].checked==false){
					 		
					 		c3[i].checked=true;
					 	}else{
					 		c3[i].checked=false;
					 	}
					 	
					 
					 }
					 cb1.checked=true;
					 for(var j=0;j<c3.length;j++){
					 	if(!c3[j].checked){
					 		cb1.checked=false;
					 		break;
					 	}
					 }
				}
				var btn4=document.getElementById("b4");
				btn4.onclick=function(){
					var c4=document.getElementsByName("a1");
					for(var i=0;i<c4.length;i++){
						if(c4[i].checked==true){
							alert(c4[i].value);
						}
					}
				};
				
				
			cb1.onclick=function(){
			var c4=document.getElementsByName("a1");
					for(var i=0;i<c4.length;i++){
						c4[i].checked=this.checked;
					}
			};
				
			var c5=document.getElementsByName("a1");
				
			for(var i=0;i<c5.length;i++){
				
				c5[i].onclick=function(){
					cb1.checked=true;
					for(var j=0;j<c5.length;j++){
							if(!c5[j].checked){
								cb1.checked=false;
								break;
							}
							
					}
					};
					
					}
					
		
		
							
			};
		</script>
	</head>
	<body>
		 	
		<form action="" method="post">
			你最喜欢的运动是
			<input type="checkbox"  id="ab" value="全选/全不选"/>全选/全不选
			<br>
			<input type="checkbox" name="a1" id="a1" value="足球" />足球
			<input type="checkbox" name="a1" id="a1" value="篮球" />篮球
			<input type="checkbox" name="a1" id="a1" value="羽毛球" />羽毛球
			<input type="checkbox" name="a1" id="a1" value="乒乓球" />乒乓球
			<br>
			<input type="button" name="b1" id="b1" value="全选" />全选
			<input type="button" name="b2" id="b2" value="全不选" />全不选
			<input type="button" name="b3" id="b3" value="反选" />反选
			<input type="button" name="b4" id="b4" value="提交" />提交
			
		</form>
	</body>
</html>