按钮小练习

最新推荐文章于 2022-08-04 07:49:17 发布

原创最新推荐文章于 2022-08-04 07:49:17 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小练习

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮小练习</title>
	<script>

	//全选按钮
	//点击按钮以后，四个多选框全都选中
	
	//#checkedAllBtn
		window.onload=function(){
		
		var checkedAllBtn=document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick=function(){
			var itms=document.getElementsByName("itms");
			for(var i=0;i<itms.length;i++){
			//通过多选框的checked属性可以来获取或设置多选框的选中状态
				itms[i].checked=true;		
			}
			checkedAllBox.checked=true;
		  }
	//全不选	
		var checkedNoBtn=document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick=function(){
			var itms=document.getElementsByName("itms");
			for(var i=0;i<itms.length;i++){
				itms[i].checked=false;
			}
			checkedAllBox.checked=true;
		  }
	
	//反选
		var checkedRevBtn=document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick=function(){
			var itms=document.getElementsByName("itms");
			for(var i=0;i<itms.length;i++){
				//已定义的对象，未赋值时在if中则为假，赋值后是真。
				//所以就可以省略==ture    if(itms[i].checked==true)
				if(itms[i].checked){
					itms[i].checked=false;
				}
				else{
					itms[i].checked=true;	
				}
				checkedAllBox.checked=true;
				for(var j=0;j<itms.length;j++){
					if(!itms[j].checked){
						//取非之后判断的条件为false，就变成了有一个没选中就进入判断语句
						checkedAllBox.checked=false;
						break;
					}
				}
			}
		  }
		
	//提交
		var checked=document.getElementById("checked");
		checked.onclick=function(){
			var itms=document.getElementsByName("itms");
			for(var i=0;i<itms.length;i++){
				if(itms[i].checked){
					alert(itms[i].value);
				}
			}
		  }
		
	//全选全不选多选框
		//在事件的响应函数中，响应函数给谁绑定的this就是谁
		var checkedAllBox=document.getElementById("checkedAllBox");
		checkedAllBox.onclick=function(){
			var itms=document.getElementsByName("itms");
			for(var i=0;i<itms.length;i++){
				itms[i].checked=checkedAllBox.checked;
				//itms[i].checked=this.checked;
			}	
		}
		
	//手动点击四个单选框，如果全选中，那么上面的全选按钮也应选中，反之没全选中，全选按钮不选中
	//因为你要自己手动点，所以你就要为四个单选按钮分别设置单击响应函数
		var itms=document.getElementsByName("itms");
		for(var i=0;i<itms.length;i++){
			itms[i].onclick=function(){			
				checkedAllBox.checked=true;
				for(var j=0;j<itms.length;j++){
					if(!itms[j].checked){
						//取非之后判断的条件为false，就变成了有一个没选中就进入判断语句
						checkedAllBox.checked=false;
						break;
					}
				}
			}
		}
		
	}
	</script>
</head>

<body>
	<form action="" method="post">
	<p>你爱好的运动是什么？</p>
	<input type="checkbox" id="checkedAllBox"/>全选/全不选<br>
	<input type="checkbox" name="itms" value="足球"/>足球
	<input type="checkbox" name="itms" value="篮球"/>篮球
	<input type="checkbox" name="itms" value="羽毛球"/>羽毛球
	<input type="checkbox" name="itms" value="乒乓球"/>乒乓球<br>
		
	<input type="button" id="checkedAllBtn" value="全选"/> 
	<input type="button" id="checkedNoBtn" value="全不选"/> 
	<input type="button" id="checkedRevBtn" value="反选"/> 
	<input type="button" id="checked" value="提交"/> 
	</form>

</body>
</html>