用js实现淘宝购物车全选中的效果（checked)

最新推荐文章于 2024-05-28 18:30:26 发布

置顶 Toleranty

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量1.1w

点赞数 2

文章标签： javascript 淘宝网

本文链接：https://blog.csdn.net/Toleranty/article/details/52247206

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check wonderful</title>
</head>

<body>

<input type="button" value="全选">
<input type="checkbox" id="sure">
<ol id="list">
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>

</ol>
</body>
<script type="text/javascript">
var sure = document.getElementById('sure'); //获取id名位sure的元素
var list = document.getElementById("list");//获取id名位list的元素
var lis = list.getElementsByTagName('input');//定义一个变量为lis的元素来获取list内的input标签
var index =0; //定义index来计数

sure.onclick = function(){
if(sure.checked ==true){
for (var i = 0; i < lis.length; i++) {

lis[i].checked=true;

index=10;

}

}else{
for (var i = 0; i < lis.length; i++) {

lis[i].checked = false;

index=0;

}
}

}

//以上是对全选框做得函数(只要sure被点击则全部被选中，否则都不选中。即sure可控制所有按钮的被选择状态)

for (var i = 0; i < lis.length; i++) {//获取一下i的范围
lis[i].onclick = function(){//对每个lis[i]设置一个点击函数如果为真 index++（自增1）
if(this.checked ==true){
index++;
console.log(index);//通过console.log可以实时查看当前index的值
if(index ==lis.length){//当index的值为i(也就是说明ol下面的所有复选框被选中了)
sure.checked=true;//全选框将会自动被选中
}
}else{
index--; //假如lis[i]没有被选中那么index的值减一
sure.checked=false;//只要是lis[i]没有全部被选中，sure就默认不被选中
}
}
}
</script>

</html>

希望上面的demo会给大家带来一些小小的帮助，本人也希望广大朋友一起来交流，嘿嘿想在这条路上越走越远~~~

Toleranty

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用js实现淘宝购物车全选中的效果（checked)

check wonderfulvar sure = document.getElementById('sure'); //获取id名位sure的元素var list = document.getElementById("list");//获取id名位list的元素var lis = list
复制链接

扫一扫