利用Jscript实现淘宝购物车的全选框功能

最新推荐文章于 2023-08-05 12:18:34 发布

丶丶丶丶。

最新推荐文章于 2023-08-05 12:18:34 发布

阅读量474

点赞数 2

分类专栏： Java 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44691025/article/details/125578065

版权

Java 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

全选框

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mig8oaNF-1656768809095)(D:\图片\全选框.png)]$

1. 实现功能

类似淘宝购物车，
勾选全选全不选时会将所有框都给选中，再次勾选全选全不选时会将所有选项都给取消勾选
按全选按钮也会将所有选项都给勾上，包括全选全不选
按全不选按钮也会将所有选项都给取消勾，包括全选全不选
如果有一个框没选中或者取消选中，都会给全选全不选前面的选项给取消掉

2.代码汇总

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选框</title>
</head>
<body>
    <div class="z1">
        <input type="checkbox" id="allOrNot" >全选全不选
    </div>
    <div>
        <input type="checkbox" name="" class="choose">篮球
        <input type="checkbox" name="" class="choose">足球
        <input type="checkbox" name="" class="choose">羽毛球
        <input type="checkbox" name="" class="choose">网球
    </div>
    <input type="button" value="全选" id="all">
    <input type="button" value="全不选" id="not">   
</body>
    <script>
        var  choose = document.getElementsByClassName("choose");
        var allOrNot = document.getElementById("allOrNot");
        allOrNot.onclick=function(){
            for(var i=0;i<choose.length;i++){
                choose[i].checked=allOrNot.checked;
            }
        }

        for(var i =0;i<choose.length;i++){
            choose[i].onclick=function(){
                for(var j =0;j<choose.length;j++){
                    if(!choose[j].checked){
                        allOrNot.checked=false;
                        break;
                    }else{
                        allOrNot.checked=true;
                    }
                }
            }
            
        }

        var all = document.getElementById("all");
        var not = document.getElementById("not");
        all.onclick=function(){
            allOrNot.checked=true;
            for(var i=0;i<choose.length;i++){
                choose[i].checked=allOrNot.checked;
            }
        }
        not.onclick=function(){
            allOrNot.checked=false;
            for(var i=0;i<choose.length;i++){
                choose[i].checked=allOrNot.checked;
            }
        }
    </script>
</html>

丶丶丶丶。

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用Jscript实现淘宝购物车的全选框功能

1. 类似淘宝购物车，2. 勾选全选全不选时会将所有框都给选中，再次勾选全选全不选时会将所有选项都给取消勾选3. 按全选按钮也会将所有选项都给勾上，包括全选全不选4. 按全不选按钮也会将所有选项都给取消勾，包括全选全不选5. 如果有一个框没选中或者取消选中，都会给全选全不选前面的选项给取消掉...
复制链接

扫一扫