百度音乐,购物车的全选功能

原创 2016年06月01日 11:34:34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,ul,h2{
padding:0px;
margin:0px;
}

.wrap{
width:300px;
margin:40px auto;
}

#oUl{
width:100%;

}

#oUl li{
list-style:none;
height:30px;
border-bottom:1px solid #000;
line-height:30px;
}

#oUl li:nth-of-type(2n){
background:#4298a5;
}

#oUl li:nth-of-type(2n+1){
background:#fff;
}

#btn{

margin-top:10px;

}
span{
color: #000;
}


a{
text-decoration:none;
float:right;
padding-right:20px;
color:#000;
}
</style>
<script>
window.onload=function(){
var aUl=document.getElementById('oUl');
var oLi=aUl.getElementsByTagName('li');   //getElementsByTagName() 方法可返回带有指定标签名的对象的集合
var aInput=aUl.getElementsByTagName('input');   //或者写成 var aInput=document.getElementById('oUl').getElementsByTagName('input');
var ODiv=document.getElementById('btn');
var Input=ODiv.getElementsByTagName('input')[0];



// for (var i = 0; i < oLi.length; i++) {
// if(i%2==0){
//
// oLi[i].style.background="#4298a5"
//
// }else{
//
// oLi[i].style.background="#fff"
//
// };
//
// };


//点击全选按钮时候 点击全选按钮后 如果全选是选中的状态,那么所有的选项被勾选
//如果全选按钮不是选中状态 所有的选项勾选被取消


Input.onclick=function(){

for(var i=0;i<aInput.length;i++){


if(Input.checked){

aInput[i].checked="checked";
}else{
aInput[i].checked="";
};

};
};



//1.首先 给所有的按钮都添加点击动作
//2.如果当前点击的那个是最后一个 那么全选按钮为选中状态,不然就不是全选状态
// 如果判断当前点击的那个是最后一个?
/*我们点击完最后一个后 把开关关闭,如果开关是关闭状态,那就表示我们点击的是最后一个 那么全选的状态为选中状态 如果当前点击的不是最一 个 那么全选为不选中状态
那我们点击当前的时候 怎么知道自己就是最后一个呢,在点击的时候 可以看看其他所有的都是一个什么状态,只要有一个的状态为不选中的状态 
 
*/

var onoff;

for(var i=0;i<aInput.length;i++){

aInput[i].onclick=function(){

if(this.checked){

onoff=true;


for(var i=0;i<aInput.length;i++){

if(!aInput[i].checked){
onoff=false;
}
}

if(onoff){

Input.checked="checked";
}

}else{

Input.checked="";
}


}

}

}


</script>
</head>
<body>
<div class="wrap">
<h2>流行</h2>
<ul id="oUl">
<li>
<input type="checkbox"/>
<span>小水果</span>
<a href="#">筷子兄弟</a>
</li>
<li>
<input type="checkbox"/>
<span>年轮</span>
<a href="#">张碧晨</a>
</li>
<li>
<input type="checkbox"/>
<span>喜欢你</span>
<a href="#">邓紫棋</a>
</li>
<li>
<input type="checkbox"/>
<span>海阔天空</span>
<a href="#">beyond</a>
</li>
<li>
<input type="checkbox"/>
<span>红豆</span>
<a href="#">王菲</a>
</li>
<li>
<input type="checkbox"/>
<span>明天,你好</span>
<a href="#">王源,王俊凯</a>
</li>
<li>
<input type="checkbox"/>
<span>青春修炼册</span>
<a href="#">TFboys</a>
</li>
<li>
<input type="checkbox"/>
<span>巴黎假期</span>
<a href="#">金志文</a>
</li>
</ul>
<div id="btn">
<input type="checkbox"/>全选
</div>
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用百度音乐盒API接口实现音乐播放器

百度音乐盒提供了一个便捷的API可以拿来访问一些音乐资源,开发者通过访问指定格式的url可以拿到返回的数据,这个数据可以是json或者xml,这里面包含了歌曲的信息。完整的API各种访问格式是非常丰富...
  • zhang___yong
  • zhang___yong
  • 2016年11月11日 21:52
  • 4339

音乐播放器之--百度音乐的接口调用

当你在百度去搜索一首歌时,你会发现有种更简单的方法,百度有个不公开的API: http://box.zhangmen.baidu.com/x?op=12&count=1&title=大约在冬季$$...
  • zhengxiangwen
  • zhengxiangwen
  • 2015年12月19日 12:13
  • 1669

python爬虫之爬取百度音乐

在上次的爬虫中,抓取的数据主要用到的是第三方的Beautifulsoup库,然后对每一个具体的数据在网页中的selecter来找到它,每一个类别便有一个select方法。对网页有过接触的都知道很多有用...
  • xiaopihaierletian
  • xiaopihaierletian
  • 2017年06月01日 16:14
  • 1441

购物车的全选 结算 合计功能

  • 2017年06月05日 13:59
  • 7.18MB
  • 下载

实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css...
  • gh323093
  • gh323093
  • 2017年11月21日 15:22
  • 318

实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示

html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css...
  • y126_Info
  • y126_Info
  • 2018年01月09日 09:50
  • 28

实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示

实现购物车结算功能:批量/全部删除,全选/反选,单价/总价,数量增减,页面隐藏/显示            .mouse_color{            background-color:...
  • Alifangxin
  • Alifangxin
  • 2018年01月08日 11:42
  • 41

实现购物车结算功能:批量和全部删除,全选和反选,单价和总价,数量增减,页面隐藏和显示

需求: 要求:技术要求(html+css+angularjs) 1.  完成页面布局,如图1.1(button按钮可以用普通按钮) 2.Ø声明数据对象,初始化商品信息,数据自拟且不低于四条 ...
  • IT666DHW
  • IT666DHW
  • 2017年10月24日 16:33
  • 1208

1模拟网易邮箱实现全选,全不的功能(服务端和客户端) 2 使用DataList实现 加入购物车,编辑,删除,更新,取消功能。要求连一个产品表。

1模拟网易邮箱实现全选,全不的功能(服务端和客户端) http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www....
  • qihongxia1
  • qihongxia1
  • 2012年12月18日 20:55
  • 323

模拟网易邮箱实现全选,全不的功能/使用DataList实现 加入购物车,编辑,删除,更新,取消功能。/试完成Datalist使用存储过程来分页

1模拟网易邮箱实现全选,全不的功能(服务端和客户端) Demo.aspx                 function chage(sender) {             v...
  • zhanglan478950
  • zhanglan478950
  • 2012年12月19日 14:26
  • 909
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:百度音乐,购物车的全选功能
举报原因:
原因补充:

(最多只允许输入30个字)