购物车全选按钮-原生JS源码实现

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

蓝玉小轩

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

阅读量2.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：原生JS小案例文章标签： html javascript html5

本文链接：https://blog.youkuaiyun.com/lanyu_er/article/details/120099495

原生JS小案例专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript实现购物车中的全选和单选功能。通过监听checkbox的checked属性，动态设置各复选框状态。全选按钮点击时，所有checkbox选中或取消选中；单个checkbox点击时，根据选中状态更新全选按钮。文章提供了两种简洁的实现方式：计数器方法和开关方法，并提供了完整源码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

购物车全选按钮-原生JS源码实现

描述：

a、点击全选按钮，所有的checkbox选中，再次点击，所有的checkbox取消选中选中状态

b、点击单个checkbox，当都选中时，全选要选中，当某一个没有选中时，全选不选中

效果：

全选按钮

原理：利用监听checked属性的状态（true/false）来动态设置复选框的状态

a.通过循环来设置下面复选框的状态，让其状态与全选的复选框状态保持一致。

b.添加计数器，记录下面复选框选中的个数，选中一个num = 1，选中n个num = n；

如何实现呢？？？

请看源码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复选框控制</title>
</head>
<body>
    <input type="checkbox"> 全选
    <hr>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <script>
        var inputs = document.getElementsByTagName('input');
        // 选中全选，没选中全不选
        var num = 0; //记录单个选择的个数  只有都选中全选按钮才会勾选
        inputs[0].onclick = function() {
                for (var i = 1; i < inputs.length; i++) {
                    // 通过循环 设置下面每个复选框的状态与全选状态保持一致  这里this指向inputs[0]
                    inputs[i].checked = this.checked;
                }
                // 重置 如果全选按钮勾选，num应该为单选的个数，没有勾选则为0
                if (!this.checked) {
                    num = 0;
                } else {
                    num = inputs.length - 1;
                }
            }
            // 下面的只有全选，上面的才会选中
        for (var i = 1; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                if (!this.checked) {
                    inputs[0].checked = false;
                    // 记录每个点击后的状态，取消勾选num - 1 ,勾选则 + 1
                    num--;
                } else {
                    num++;
                }
                // 只有在num = 单选的个数，即全部勾选，全选按钮才会变成选中状态
                if (num === inputs.length - 1) {
                    inputs[0].checked = true;
                }
            }
        }
    </script>
</body>
</html>

简化1(计数器方式)：

<script>
        // 通过css选择器获取元素，document也可以是某个父级 IE8及以上支持
        var all = document.querySelector('#all');
        var inputs = document.querySelectorAll('p input');
        // 全选
        all.onclick = function() {
            var tag = this.checked; // 全选的状态
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = tag;
            }
        }
        // 点击单个(计数的方式)
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                var count = 0; // 计数器
                // 通过循环记录选中的个数
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].checked) {
                        count++;
                    }
                }
                // if (count === inputs.length) {
                //     all.checked = true;
                // } else {
                //     all.checked = false;
                // }
                
                //根据运算符优先级 将上面if 简写  
                //count === inputs.length的结果为true,即所有都选中，全选checked状态为true
                all.checked = count === inputs.length;
            }
        }
    </script>

简化2(开关方式)：

<script>
        var all = document.querySelector('#all');
        var inputs = document.querySelectorAll('p input');
        // 全选
        all.onclick = function () {
            var tag = this.checked; // 全选的状态

            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = tag;
            }
        }
        // 点击单个(开关的方式)
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function () {
                var tag = true; // 开关，默认为真
                // 点击单个时，检查每一个是否选中，如果有一个没有选中，则开关为假
                for (var i = 0; i < inputs.length; i++) {
                    if (!inputs[i].checked) {
                        tag = false;
                        break;
                    }
                }
                all.checked = tag;
            }
        }
    </script>

有疑问可评论留言