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

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

淘宝购物车全选js

  • 2016年04月13日 20:53
  • 4KB
  • 下载

Dom编程(购物车 全选及金额总计、仿css手册实例效果)

购物车 全选及金额总计

CheckBox_全选_仿购物车

MainActivity/** * @功能 CheckBox 复选框 * @说明 仿购物车结算 */ public class MainActivity extends Activity imp...
  • tumi98
  • tumi98
  • 2017年08月08日 16:04
  • 121

小程序:购物车项目案例(加减商品数量、全选与全不选、价格汇总、删除提示)

最近由于项目需要,就利用小程序做了个购物车功能的小demo,大家可以参考下。 功能点: 加减商品数量(可自定义商品数量)、汇总价格、全选与全不选、删除商品弹窗提示 主思路: 一、本地模拟Json数...

android仿淘宝购物车全选单选编辑动态改变价格

android仿淘宝购物车 先看gif效果图,以免看了半天不是想要的效果 看到这还没走的应该就是想要的效果吧,下面具体分析 等不及的可以拖到底部的下载地址 先看看布局文件,布局文件很简...

android购物车简单实现全选+加减器+总价格

//Activity主頁面佈局 RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"...
  • YS_HAN
  • YS_HAN
  • 2017年10月31日 20:08
  • 53

微信小程序全选,微信小程序checkbox,微信小程序购物车

微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。、 http://www.cnblogs.com/0liaoyi/p/6054765.html 摘要: 加...

购物车 全选逻辑

购物车 全选逻辑思路 购物车的条目采用listview 展示 listview 条目中 checkbox 控件,该控件默认为未选中 isChecked(false); listview外部点击全选按钮...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:百度音乐,购物车的全选功能
举报原因:
原因补充:

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