HTML
<div class="box"> <div class="top"> <span class="fl"> <label> <input type="checkbox" id="allBtn"/> <em></em> </label> 歌曲 </span> <span class="fl">歌手</span> <span class="fl">专辑</span> </div> <ul> <li> <label> <span class="fl"> <input type="checkbox" id="li1"/> <em></em> <i class="songName" title="像风一样">像风一样</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="薛之谦">薛之谦</span> <span class="album fl" title="像风一样">像风一样</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="爱你(Live)">爱你(Live)</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="林俊杰">林俊杰</span> <span class="album fl" title="梦想的声音第二季 第2期">梦想的声音第二季 第2期</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="爱如潮水(Live)">爱如潮水(Live)</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="GAI">GAI</span> <span class="album fl" title="蒙面唱将猜猜猜第二季 第9期">蒙面唱将猜猜猜第二季 第9期</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="文爱">文爱</i> <i class="HQ">HQ</i> </span> <span class="singer fl" title="CG">CG</span> <span class="album fl" title="文爱">文爱</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="Sleep">Sleep</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="王源">王源</span> <span class="album fl" title="Sleep">Sleep</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="萌力觉醒">萌力觉醒</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="江苏泷">江苏泷</span> <span class="album fl" title="萌力觉醒">萌力觉醒</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="萌力觉醒">萌力觉醒</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="江苏泷">江苏泷</span> <span class="album fl" title="萌力觉醒">萌力觉醒</span> </label> </li> <li> <label> <span class="fl"> <input type="checkbox" /> <em></em> <i class="songName" title="萌力觉醒">萌力觉醒</i> <i class="SQ">SQ</i> </span> <span class="singer fl" title="江苏泷">江苏泷</span> <span class="album fl" title="萌力觉醒">萌力觉醒</span> </label> </li> </ul> </div>
CSS
*{ margin: 0; padding: 0; } .fl{ float: left; } .fr{ float: right; } .clearFix{ display: block; clear: both; content: ""; } i{ font-style: normal; } span{ display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .box{ 735px; background: #fff; margin: 50px auto 0; padding: 30px 15px; position: relative; } .top{ color: #444; height: 40px; line-height: 40px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .top span:nth-of-type(1), li span:nth-of-type(1){ 290px; } .top span:nth-of-type(2), .singer{ 170px; } .top span:nth-of-type(3), .album{ 240px; } input{ position: absolute; left: -99999999999px; } em{ display: inline-block; 15px; height: 15px; border: 1px solid #C0C0C0; vertical-align: middle; margin: 0 0 0 10px; color: limegreen; position: relative; font-style: normal; } input:checked+em{ border: 1px solid limegreen; } input:checked+em:after{ position: absolute; content:"2714"; 15px; height: 15px; text-align: center; line-height: 15px; } li{ height: 40px; line-height: 40px; list-style: none; border-bottom: 1px solid #ccc; } .SQ,.HQ{ display: inline-block; padding: 0 3px; height: 12px; line-height: 12px; font-size: 12px; border-radius: 3px; } .SQ{ border: 1px solid orangered; color: orangered; } .HQ{ border: 1px solid limegreen; color: limegreen; } li label{ display: block; 100%; height: 100%; }
JS
var oUl=document.getElementsByTagName("ul")[0]; var aLi=oUl.getElementsByTagName("li"); var aInput=oUl.getElementsByTagName("input"); var allBtn=document.getElementById("allBtn"); var num=0; for (var i=0;i<aInput.length;i++) { //鼠标移入 aLi[i].onmouseover=function(){ this.style.background="rgba(0,0,0,.1)"; } //鼠标移出 aLi[i].onmouseout=function(){ this.style.background=""; } //鼠标点击 aInput[i].index=i; aInput[i].onclick=function(){ //格式化 for (var i=0;i<aInput.length;i++) { aLi[i].style.background=""; aLi[i].onmouseout=function(){ this.style.background=""; } } //判断选中状态,选中num加1,否则减1 if(this.checked){ num++; aLi[this.index].style.background="rgba(0,0,0,.1)"; aLi[this.index].onmouseout=null; }else{ num--; } //判断选中个数 if(num==aInput.length){ allBtn.checked=true; }else{ allBtn.checked=false; } } } //全选按钮 allBtn.onclick=function(){ if(this.checked){ num=aInput.length; for (var i=0;i<aInput.length;i++) { aInput[i].checked=true; } }else{ num=0; for (var i=0;i<aInput.length;i++) { aInput[i].checked=false; } } }