<!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>
1 回答
已采纳
FSYu
TA贡献152条经验 获得超59个赞
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];
}
}
}如上所示，少写一行代码
添加回答
举报
0/150
提交
取消