javascript(17)练习-全选

最新推荐文章于 2022-11-12 15:10:34 发布

冲啊Javascripit

最新推荐文章于 2022-11-12 15:10:34 发布

阅读量94

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/weixin_43752554/article/details/105546108

版权

javascipt 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function(){
				var Sall=document.getElementById("Sall");
				var likeWeb=document.getElementsByName("web");
				//全选按钮，点击之后所有的复选框都选中。方框里的框看checked的属性
				Sall.onclick=function(){
					for(var i=0;i<likeWeb.length;i++){
						
						likeWeb[i].checked=true;
					}
					all.checked=true;
				};
				//全不选
				var notAll=document.getElementById("notAll");
				notAll.onclick=function(){
					for(var i=0;i<likeWeb.length;i++){
						
						likeWeb[i].checked=false;
					}
					all.checked=false;
				};
				function checkAll(){
					for(var i=0;i<likeWeb.length;i++){
						if(likeWeb[i].checked==false){
							all.checked=false;
							return;
						}
					}
					all.checked=true;
				}
				//反选
				var reverse=document.getElementById("reverse");
				reverse.onclick=function(){ 
					for(var i=0;i<likeWeb.length;i++){
						
						likeWeb[i].checked=!likeWeb[i].checked;
					}
					checkAll();
				};
				//提交
				var submit=document.getElementById("submit");
				submit.onclick=function(){
					for(var i=0;i<likeWeb.length;i++){
						
						if(likeWeb[i].checked){
							alert(likeWeb[i].value);
						}
					}
				};
				//全选，或者全不选
				var all=document.getElementById("all");
				all.onclick=function(){
					for(var i=0;i<likeWeb.length;i++){
						likeWeb[i].checked=all.checked;
					}
					
				};
				for(var i=0;i<likeWeb.length;i++){
					likeWeb[i].onclick=function(){
						checkAll();
					};
				}
			};
		</script>
	</head>
	<body>
		选择你爱去的视频网站    <input type="checkbox" id="all" value="全选/全不选">全选/全不选
		
		<br />
		<br />
		<input type="checkbox" value="b站" name="web">b站
		<input type="checkbox" value="爱奇艺" name="web">爱奇艺
		<input type="checkbox" value="湖南卫视" name="web">湖南卫视
		<input type="checkbox" value="优酷" name="web">优酷
		<br />
		<input type="button" value="全选" id="Sall"> 
		<input type="button" value="全不选" id="notAll">
		<input type="button" value="反选" id="reverse">
		<input type="submit" value="提交" id="submit"> 
	</body>
</html>

关键在于全选/全不选这个按钮。
勾选全选/全不选，选择所有的复选框
取消勾选全选/全不选，取消勾选所有的复选框

并且，如果点击复选框、全选、全不选、反选，造成复选框不是全选或者全不选，要改变全选/全不选的勾取状态。

知识点：复选框对象.checked是复选框是否勾选，勾选，则true，否则，false
利用函数，判断复选框是否全选或者全部不选，如果有false，直接返回return；以中断函数

冲啊Javascripit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript(17)练习-全选

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var Sall=document.getElementById("Sall")...
复制链接

扫一扫