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

最新推荐文章于 2022-03-01 14:54:00 发布

清风乐鸣

最新推荐文章于 2022-03-01 14:54:00 发布

阅读量674

点赞数 1

分类专栏： HTML JQ 文章标签：百度 javascript native

本文链接：https://blog.csdn.net/QTFYING/article/details/51554702

版权

JQ 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 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.οnlοad=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.οnclick=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].οnclick=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>