看了很多模拟百度音乐全选操作小例子,觉得还原度都不高,自己写了个(包括按钮的禁用啥的都满足了),一起学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#content{margin: 100px auto;border-bottom: 2px solid black; height: 270px; width:330px;}
ul{margin: 0; padding: 0; border-bottom: 1px solid #e1e1e1;}
li{list-style: none;height: 40px; width: 328px; padding-left:20px ;
font-size: 14px;}
input{font-size: 14px;}
span{font-size: 14px;}
/*初始化,隔行变色*/
#content ul li:nth-child(odd) {background:white;}/*单行白色*/
#content ul li:nth-child(even) {background:#f7ffff;}/*双行蓝色*/
#content ul li:hover{background:#efefef; cursor: pointer;}/*触碰变色,hover在后面*/
</style>
<script>
window.onload=function(){
var ali=document.getElementsByTagName('li');
var ain=document.getElementsByTagName('input');
var all=document.getElementById('all');
for(var i=0;i<ali.length;i++){
ain[i].index=i;
ain[i].onclick=function(){
var oldcolor=null;
if(this.index%2==0)
oldcolor='white';
else
oldcolor='#f7ffff';
ali[this.index].style.background = this.checked ? '#efefef' :oldcolor;
var num=0;
for(var k=0;k<6;k++){
if(ain[k].checked){
num++;
}
if(num!=6){
ain[6].checked=false;
}
else{
ain[6].checked=true;
}
if(num==0){
ain[7].setAttribute('disabled',true);
ain[8].setAttribute('disabled',true);
ain[9].setAttribute('disabled',true);
}else{
unjin();
}
}
}
}
//全选
all.onclick=function(){
for(var i=0;i<6;i++){
ain[i].checked=true;
ali[i].style.background="#efefef";
}
unjin();
}
//取消禁用
function unjin(){
for(var n=0;n<6;n++){
if(ain[n].checked){
ain[7].removeAttribute('disabled');
ain[8].removeAttribute('disabled');
ain[9].removeAttribute('disabled');
break;
}
}
}
}
</script>
</head>
<body>
<div id="content">
<ul>
<li><input type="checkbox" />私奔 梁博</li>
<li><input type="checkbox" />私奔 梁博</li>
<li><input type="checkbox" />私奔 梁博</li>
<li><input type="checkbox" />私奔 梁博</li>
<li><input type="checkbox" />私奔 梁博</li>
<li><input type="checkbox" />私奔 梁博</li>
</ul>
<input style="margin-left: 25px;" type="checkbox" id="all"/><span> 全选</span>
<input style="margin-left:8px;" type='button' value="❤ 收藏" disabled/>
<input style="margin-left: 8px;" type='button' value="➕ 添加" disabled/>
<input style="margin-left: 8px;" type='button' value="❌ 删除" disabled/>
</div>
</body>
</html>