<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
#wrap{
width:400px;
margin:20px auto;
border:1px #CCC solid;
}
#wrap #list li{
height:30px;
width: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{
width: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;
width: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>
