JS模拟复选框的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
#box {
width: 100px;
height: 300px;
border: 1px solid #000;
margin: 20px auto;
padding-top: 10px;
box-sizing: border-box;
}
#box div {
width: 30px;
height: 30px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 10px;
}
#box p {
width: 30px;
height: 30px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<p id="p"></p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var op=document.getElementById("p");
var obox = document.getElementById("box");
var adiv = obox.querySelectorAll("div");
var arr=[];
//循环遍历adiv,即复选框每个小格子
for(var i=0;i<adiv.length;i++){
// 给每小格子一个初始的状态;相当有了一个叫flag的css属性,属性值就是“2”;当这个属性值为“2”的时候就代表选中;
adiv[i].flag=2;
// console.log(adiv[i].flag);
// 给每个小格子绑定点击事件;
adiv[i].onclick=function(){
// 每个小格子有两种状态,即2代表被选中,1代表未被选中;
if(this.flag==2){
this.style.background="pink";
this.flag=1;
}else if(this.flag==1){
this.style.background="red";
this.flag=2;
}
//记录每个格子选中的状态,但注意由于上面的设置,这里num记录的数值和状态所对应的数值是相反的;
num=this.flag;
// 提前在开始声明一个空数组,把每次点击的数值给push进去;
arr.push(num);
// console.log(arr);
var sum=0;
for(var l=0;l<arr.length;l++){
sum+=arr[l];
}
console.log(sum);
// 根据被选中时的状态时1,所以全部被选中时状态值之和也就等于复选框的个数(adiv的length);
if(sum==adiv.length){
op.style.background="blue"
}
}
}
</script>
</html>