js全选

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

body {}

ul li {
list-style: none;
}

.list {
width: 120px;
margin: 0 auto;
}

.list ul li {
border: 1px solid #ddd;
padding: 6px;
margin-bottom: 5px;
}

.list ul li.active {
background: #ccc;
}
</style>
</head>


<body>
<div class="list">
<ul>
<li>
<input type="checkbox" />
<span>私奔</span>
<span>梁博</span>
</li>
<li>
<input type="checkbox" />
<span>私奔</span>
<span>梁博</span>
</li>
<li>
<input type="checkbox" />
<span>私奔</span>
<span>梁博</span>
</li>
<li>
<input type="checkbox" />
<span>私奔</span>
<span>梁博</span>
</li>
<li>
<input type="checkbox" />
<span>私奔</span>
<span>梁博</span>
</li>
<li>
<input type="checkbox" />
<span>全选</span>
</li>
</ul>
</div>


<script>
var oInput = document.getElementsByTagName("input")
var oLi = document.getElementsByTagName("li")
var num = 0


for(var i = 0; i < oLi.length - 1; i++) {
oInput[i].index = i
oInput[i].onclick = function() {
if(this.checked) {
oLi[this.index].className = "active"
num++
} else {
oLi[this.index].className = ""
num--
}


if(num == oLi.length - 1) {
oInput[oInput.length - 1].checked =true
} else {
oInput[oInput.length - 1].checked =false
}
}


oLi[i].onmouseover = function() {
this.style.background = "#CCCCCC"
}
oLi[i].onmouseout = function() {
for(var i = 0; i < oLi.length; i++) {
oLi[i].style.background = ""
}
}




                oInput[oInput.length-1].onclick=function(){
                  if(this.checked){
                  for(var i=0;i<oInput.length-1;i++){
                  oInput[i].checked=true
                  }
                  }else{
                    for(var i=0;i<oInput.length-1;i++){
                  oInput[i].checked=false
                  }
                  }
                }
}
</script>
</body>


</html>
posted on 2018-06-04 15:43  革命军总部  阅读(113)  评论(0)    收藏  举报