js全选

最新推荐文章于 2023-03-26 14:22:46 发布

原创最新推荐文章于 2023-03-26 14:22:46 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#全选

js 专栏收录该内容

37 篇文章

订阅专栏

<!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>