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>
