案列

最新推荐文章于 2024-05-13 09:57:56 发布

zhangzongxing_

最新推荐文章于 2024-05-13 09:57:56 发布

阅读量88

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/zhangzongxing_/article/details/114789214

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

全选按钮

非完整版

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function (){
			var all=document.getElementsByName("checkAll")[0];
			all.onclick=function(){
				var result=all.checked;
				var nodeList=document.getElementsByName("hobby");
				
				alert(result);
				for(var i=0;i <nodeList.length;i++){
					nodeList[i].checked=result;
					
				}
					
			}
				
				
			}
			
			
			
		</script>
	</head>
	<body>
		全选:<input type="checkbox" name="checkAll" /><br />
	爱好：	
	<br />
	<input type="checkbox" name="hobby" value="篮球" />篮球
	<input type="checkbox" name="hobby" value="羽毛球" />篮球
	<input type="checkbox" name="hobby" value="游戏" />篮球
	<input type="checkbox" name="hobby" value="电影" />篮球
	<input type="checkbox" name="hobby" value="画画" />篮球
	<input type="checkbox" name="hobby" value="游泳" />篮球
	</body>
</html>

极其重要

使用Dom编程来完成事件有俩种方式

获取标签对象
var 标签对象 =document.getElementById(“id”);
var 标签对象=document.getElementsByName(“name”);
var 标签对象=document.getElementsByTagName(“标签名”);

 一. 通过标签之间使用事件属性的方式

 标签对象.onclick=function(){
		//之间编写事件

	}

**不足**：
1. 必须先在加载事件之内才能使用
2.通过属性绑定事件检测器只能针对单个标签，对于集合就只能一个个通过id选择器的方式赋予onclick事件检测器属性。

window.onload=function(){

 标签对象.onclick=function(){
			//之间编写事件

		}
	



	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function (){
				
				
				var all=document.getElementsByName("checkAll")[0];
			
				var nodeList=document.getElementsByName("hobby");
				
			all.onclick=function(){
				
				var result=all.checked;
				
				for(var i=0;i <nodeList.length;i++){
					nodeList[i].checked=result;
					
				}
				
				
					
			}
			var s1=document.getElementById("s1");
			s1.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
		
		
		
		
		
		
		var s2=document.getElementById("s2");
			s2.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
			
				
	
	
		var s3=document.getElementById("s3");
			s3.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
			
		
		
		var s4=document.getElementById("s4");
			s4.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
			
		
		
		var s5=document.getElementById("s5");
			s5.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
			
		
	
		var s6=document.getElementById("s6");
			s6.onclick=function(){
				var size=nodeList.length;
				var count=0;
				for(i=0;i<size;i++){
					if(nodeList[i].checked){
						count++;
					}
					
				}
				if(count>=size){
					all.checked=true;
				}else{
					all.checked=false;
				}
				
				
			}
				
				
				
			}
			
			
			
			
		</script>
	</head>
	<body>
		全选:<input type="checkbox" name="checkAll" /><br />
	爱好：	
	<br />
	<input id="s1" type="checkbox" name="hobby" value="篮球"  />篮球
	<input id="s2" type="checkbox" name="hobby" value="羽毛球" />篮球
	<input id="s3" type="checkbox" name="hobby" value="游戏" />篮球
	<input id="s4" type="checkbox" name="hobby" value="电影" />篮球
	<input id="s5" type="checkbox" name="hobby" value="画画"  / >篮球
	<input id="s6" type="checkbox" name="hobby" value="游泳" />篮球
	</body>
</html>

二. 事件检测器直接写在标签内部

优点：
1.只需要在事件源内部以标签属性的形式直接写入到标签中
2. 无需加载完呈现的事件来辅助

zhangzongxing_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案列

全选按钮非完整版<html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function (){ var all=document.getElementsByName("checkAll")[0]; all.onclick=function(){ var result=all.checked;
复制链接

扫一扫