关闭

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

标签: 百度javascriptnative
232人阅读 评论(0) 收藏 举报
分类:
<!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>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:37716次
    • 积分:1022
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:5篇
    • 译文:0篇
    • 评论:4条