js 模拟百度音乐-全选操作

效果图大致如下：

添加删除按钮暂时没写事件的发生哦！

代码如下：

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
	list-style: none;
	}
	.box{
	width: 340px;
	height: 360px;
	margin: 50px auto;
	border: 1px #999 solid;
	}
	.box ul li{
	width: 340px;
	height: 50px;
	display: block;
	border-bottom: 1px #fff solid;
	}
	.box ul li p{
	display: inline-block;
	width: 250px;
	margin-left:10px;
	}
	.box input{
	margin-left: 30px;
	margin-top: 20px;
	}
	.check{
	width: 340px;
	height: 50px;
	border-top: 1px #999 solid;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<ul id="ul">
	<li>
	<input type="checkbox" >
	<p>私奔                 梁博</p>
	</li>
	<li>
	<input type="checkbox" >
	<p>北京北京             梁博，黄勇</p>
	</li>
	<li>
	<input type="checkbox" >
	<p>我爱你中国           梁博</p>
	</li>
	<li>
	<input type="checkbox" >
	<p>花火                 梁博</p>
	</li>
	<li>
	<input type="checkbox" >
	<p>回来                 梁博</p>
	</li>
	<li>
	<input type="checkbox" >
	<p>爱要有你才完美       梁博，那英</p>
	</li>
	</ul>
	<div class="check">
	<input id="btn" type="checkbox" value="全选">
	<input type="button" value=" 收藏">
	<input type="button" value="+ 添加">
	<input type="button" id="btn2" value="× 删除">
	</div>
	</div>

	<script type="text/javascript">
	var oUL=document.getElementById('ul');
	var aLi=oUL.getElementsByTagName('li');
	var btn=document.getElementById("btn");
	var btn2=document.getElementById('btn2');
	var arr=['pink','rgb(237,255,255)'];
	var str='';
	for(var i=0;i<aLi.length;i++){
	aLi[i].style.background=arr[i%2];
	aLi[i].onmouseover=function(){
	str=this.style.background;
	this.style.background="rgb(239,210,210)";
	}
	aLi[i].index=i;
	aLi[i].onmouseout=function(){
	this.style.background=str;
	}
	}
	btn.onclick=function(){
	var aInput=oUL.getElementsByTagName('input');

	for(var i=0;i<aInput.length;i++ ){
	aInput[i].checked=!aInput[i].checked;
	}
	}


	</script>
	</body>
	</html>

js 模拟百度音乐-全选操作

猜你喜欢