JS基础-全选练习-尚硅谷p98-100

最新推荐文章于 2026-06-17 11:21:06 发布

原创最新推荐文章于 2026-06-17 11:21:06 发布 · 403 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html5

JS 专栏收录该内容

23 篇文章

订阅专栏

该内容主要介绍了JavaScript基础中的全选练习，通过尚硅谷的视频教程进行学习，涵盖了前端开发中JS全选功能的实现技巧。

视频链接：
尚硅谷-JS基础-全选练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var items=document.getElementsByName("items");
				//全选/全不选
				var checkedAllButton=document.getElementById("checkedAllBox");
				checkedAllButton.onclick=function(){
					for(var i=0;i<items.length;i++){
						// if(items[i].checked==true){
						// 		items[i].checked=false;
						// }else{
						// 		items[i].checked=true;
						// }
						//items[i].checked=!items[i].checked;
						items[i].checked=checkedAllBox.checked;
					}
					
				}
				//为四个多选框添加函数
				for(var i=0;i<items.length;i++){
					items[i].onclick=function(){		
						checkedAllBox.checked=true;
						for(var j=0;j<items.length;j++){
							if(items[j].checked==false){
								checkedAllBox.checked=false;
								break;
							}
						}
					}
				}
				//全选：
				var checkedAllBtn=document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick=function(){
					//var items=document.getElementsByName("items");			
					for(var i=0;i<items.length;i++){	
						if(items[i].checked==false) items[i].checked=true;	
					} 
					checkedAllBox.checked=true;
				}
				//全不选
				var checkedNoBtn=document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick=function(){
					//var items=document.getElementsByName("items");
					// alert(items.length);
					for(var i=0;i<items.length;i++){
						if(items[i].checked==true)	items[i].checked=false;
					} 
					checkedAllBox.checked=false;
				}
				//反选
				var checkedRevBtn=document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick=function(){
					//var items=document.getElementsByName("items");
					// alert(items.length);
					checkedAllBox.checked=true;
					for(var i=0;i<items.length;i++){
						// if(items[i].checked==true)items[i].checked=false;
						//else{items[i].checked=true; }
						items[i].checked=!items[i].checked;
						if(items[i].checked==false){
							checkedAllBox.checked=false;
						}
					}
				}
				
				//提交按钮
				var SendBtn=document.getElementById("SendBtn");
				SendBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked)
							alert(items[i].value);
						
					}
				}
			}
		
		</script>
	</head>
	<body>
		<form method="post" action="">
			你最爱好的运动是？
			<input type="checkbox" id="checkedAllBox"  />全选/不全选
			<br />
			<input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="乒乓球"/>乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全 选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反 选" />
			<input type="button" id="SendBtn" value="提 交" />
			
			
		</form>
	</body>
</html>