为什么全选按钮开启时颜色加不上去？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>
<style type="text/css">
body{font-family:"微软雅黑";}
*{margin: 0;padding: 0;}
li{list-style: none;}
.box{width: 278px;height: 245px;padding: 15px;background: #ddf;border: 1px solid #aaa;position: absolute;top: 50%;left: 50%;margin-left: -145px;margin-top: -145px;}
ul{content: "";display: block;clear: both;zoom:1;}
input{margin-right: 10px;vertical-align: middle;}
span{vertical-align: middle;}
.list{height: 190px;margin-bottom: 15px;overflow-y:auto;overflow-x:hidden;}
.btn{height:33px;padding-top: 10px;border-top: 2px solid #aaa;}
li{height: 30px;line-height: 30px;margin-bottom: 3px;padding: 0 5px;cursor: pointer;font-size: 14px;}
.btn li{margin-right: 7px;float: left;}
.btn .qx{margin-right: 50px;}
</style>
</head>
<body>
<div>
<ul>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
<li><input type="checkbox"><span>列表项列表项列表项</span></li>
</ul>
<ul>
<li><input type="checkbox" id="check"><span>全选</span></li>
<li>收藏</li>
<li>下载</li>
<li>删除</li>
</ul>
</div>
<script type="text/javascript">
var oList=document.getElementsByTagName('ul')[0];
var oBtn=document.getElementsByTagName('ul')[1];
var aLi1=oList.getElementsByTagName('li');
var aLi1l=aLi1.length;
var oAll=document.getElementById('check');
var aInput=document.getElementsByTagName('input');
var aInputl=aInput.length;
var arr=['#cff','#fff'];
var num=0;
for(var i=0;i<aLi1l;i++){
aLi1[i].index=i;
aLi1[i].style.background=arr[i%arr.length];
aLi1[i].onmouseover=function(){
aLi1[this.index].style.background='#ccf';
}
aLi1[i].onmouseout=function(){
if(aInput[this.index].checked==false){
aLi1[this.index].style.background=arr[this.index%arr.length];
}
}
aLi1[i].onclick=function(){
if(aInput[this.index].checked==false){
aInput[this.index].checked=true;
num++;
}else{
aInput[this.index].checked=false;
num--;
}
if(num==aLi1l){
oAll.checked=true;
}else{
oAll.checked=false;
}
}
}
for(var i=0;i<aLi1l;i++){
aInput[i].index=i;
aInput[i].onclick=function(){
if(aInput[this.index].checked==false){
aInput[this.index].checked=true;
}else{
aInput[this.index].checked=false;
}
}
}
oAll.onclick=function(){
if(oAll.checked==true){
for(var i=0;i<aLi1l;i++){
aInput[i].checked=true;
}
}else{
for(var i=0;i<aLi1l;i++){
aInput[i].checked=false;
aLi1[i].style.background=arr[i%arr.length];
}
}
}
</script>
</body>
</html>
kolog1回答
-
FSYu
oAll.onclick = function() { if (oAll.checked == true) { for (var i = 0; i < aLi1l; i++) { aInput[i].checked = true; aLi1[i].style.background = '#ccf';//这行代码你没写 } } else { for (var i = 0; i < aLi1l; i++) { aInput[i].checked = false; aLi1[i].style.background = arr[i % arr.length]; } } }如上所示，少写一行代码
随时随地看视频慕课网APP
相关分类
JavaScript