Javascript实现全选按钮

Javascript实现全选按钮

效果：有全选选项框和单个选项框，选择全选框，所有的的选择都打上的钩，取消全选钩所有的都去掉了钩，如果取消其中某一个的钩，那么全选的钩也取消，反之全选所有的选项，那么全选的钩就会打上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript_test</title>
<script src="test.js" type="text/javascript"></script>
<link href="test.css" type="text/css" rel="stylesheet">
</link>
<style>
* {
	margin: 0;
	padding: 0;
}
.div_center_ab {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14%;
	height: 30%;
	border: 2px solid #6A7006;
	transform: translate(-50%, -50%);
}
.div_center_re {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
</head>

<body >
<div class=" div_center_ab">
  <div class="div_center_re"> 全选
    <input type="checkbox" id="boxall">
    <br>
    <hr>
    选项1
    <input type="checkbox">
    <br>
    选项2
    <input type="checkbox">
    <br>
    选项3
    <input type="checkbox">
    <br>
    选项4
    <input type="checkbox">
    <br>
  </div>
</div>
<script>
 var boxall=document.getElementById("boxall")
 var boxse=document.querySelectorAll("input:nth-child(n+2)")
 
 console.log(boxall)
 console.log(boxse)
 
 boxall.onclick=function(){
	var checkall=boxall.checked
	for(var i=0;i<boxse.length;i++)
		boxse[i].checked=checkall;
	 
 }
 
 //判断不同选项是否被选中
 for(var i=0;i<boxse.length;i++){
	
	 boxse[i].onclick=function(){
		  var flag=true
         for(var j=0;j<boxse.length;j++){
			if(boxse[j].checked===false){
			 flag=false
			 break
		 } 
		 }
		 
		boxall.checked=flag 	
		 
	 }
	
 }
 
</script>
</body>
</html>
posted @ 2022-01-18 16:15  永恒之月TEL  阅读(138)  评论(0)  编辑  收藏  举报