<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } #wrap{ 400px; margin:20px auto; border:1px #CCC solid; } #wrap #list li{ height:30px; 100%; list-style-type:none; position:relative; line-height:30px; } #wrap #list input{ margin-left:10px; } .title{ position:absolute; left:30px; } .singer{ position:absolute; right:35px; } #control{ height:35px; border-top:1px #CCCCCC solid; border-bottom:2px #333333 solid; } #control li{ 100px; float:left; text-align:left; list-style-type:none; } #control li input{ margin-left:10px; } #control li span{ line-height:35px; margin-left:5px; } #control div{ border:1px #CCC solid; height:20px; 60px; line-height:20px; padding-left:10px; text-align:center; border-radius:5px; margin:6px 5px; font-size:12px; opacity:0.3; } #favorite{ background:url(img/favorite.gif) no-repeat 5px center; } #add{ background:url(img/add.png) no-repeat 5px center; } #del{ background:url(img/delete.png) no-repeat 5px center; } </style> <script type="text/javascript"> window.onload = function () { var oull = document.getElementById('list'); var oli = oull.getElementsByTagName('li'); var oinput = oull.getElementsByTagName('input'); var oulc = document.getElementById('control'); var cdiv = oulc.getElementsByTagName('div'); var cinput = document.getElementById('allinput'); function jishu (a) { for( var i = 0; i < oli.length; i++) { if(oinput[i].checked == true) a++; } return a; }; function hide() { for( var i = 0; i < oli.length; i++) { if( i % 2 == 0 ) { oli[i].style.background = '#F7FFFF'; } else { oli[i].style.background = '#fff'; } oinput[i].checked = false; } for( var i = 0; i < cdiv.length; i++) { cdiv[i].style.opacity = 0.3; } }; function show() { for( var i = 0; i < oli.length; i++) { oli[i].style.background = '#EEEEEE'; oinput[i].checked = true; } for( var i = 0; i < cdiv.length; i++) { cdiv[i].style.opacity = 1; } }; cinput.onclick = function () { if(cinput.checked) { show(); } else { hide(); } }; for( var i = 0; i < oli.length; i++) { oli[i].index = i; oli[i].onclick = function () { if(oinput[this.index].checked ) { this.style.background = '#EEEEEE'; for( var i = 0; i < cdiv.length; i++) { cdiv[i].style.opacity = 1; } if(jishu(0) == 6) { cinput.checked = true; } } else { if( this.index % 2 == 0 ) { this.style.background = '#F7FFFF'; } else { this.style.background = '#fff'; } if(jishu(0) == 0) { for( var i = 0; i < cdiv.length; i++) { cdiv[i].style.opacity = 0.3; } } } }; } }; </script> </head> <body> <div id="wrap"> <ul id="list"> <li> <input type="checkbox"> <span class="title">私奔</span> <span class="singer">梁博</span> </li> <li> <input type="checkbox"> <span class="title">北京北京</span> <span class="singer">梁博</span> </li> <li> <input type="checkbox"> <span class="title">我爱你中华</span> <span class="singer">梁博</span> </li> <li> <input type="checkbox"> <span class="title">火花</span> <span class="singer">梁博</span> </li> <li> <input type="checkbox"> <span class="title">回来</span> <span class="singer">梁博</span> </li> <li> <input type="checkbox"> <span class="title">爱要有你才完美</span> <span class="singer">梁博</span> </li> </ul> <ul id="control"> <li> <input id="allinput" type="checkbox"> <span>全选</span> </li> <li> <div class="button" id="favorite">收藏</div> </li> <li> <div class="button" id="add">增加</div> </li> <li> <div class="button" id="del">删除</div> </li> </ul> </div> </body> </html>