商品购物车的全选反选

最新推荐文章于 2024-07-18 11:48:33 发布

Will_Season

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量104

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Will_Season/article/details/129040081

版权

<!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>Document</title>
</head>
<style>
    .tab{
        width: 450px;
        border: 1px solid #666;
        border-collapse: collapse;
        margin: auto;
    }
    .tab th{
        background-color: cornflowerblue;
    }
    .tab th,td{
        border: 1px solid #666;
        width: 150px;
        text-align: center;
    }
</style>
<body>
    <div class="box">
        <table class="tab">
            <thead class="th">
                <tr>
                    <th><input type="checkbox" class="all"></th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="item" name="items"></td>
                    <td>小米12</td>
                    <td>4999</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="item" name="items"></td>
                    <td>小米11</td>
                    <td>3999</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="item" name="items"></td>
                    <td>小米10</td>
                    <td>3999</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="item" name="items"></td>
                    <td>Air</td>
                    <td>200</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        let all = document.querySelector('.all')
        let items = document.getElementsByName('items')
        let falg = true
        // 2、给表示全选的input标签添加点击事件
    all.addEventListener('click', function () {
        // 循环遍历伪数组中存储的其他的所有input标签对象
        items.forEach(function (item) {
            // item中存储的是伪数组中的每一个 name="items" 的input标签
            // 将全选input标签的checked属性值赋值给其他的input标签
            item.checked = all.checked;
        });
    });

    // 3、循环遍历伪数组, 给所有其他的input标签添加点击事件
    items.forEach(function (item) {
        item.addEventListener('click', function () {
            // 定义一个变量存储原始值
            var res = true;
            // 循环遍历每一个其他input标签对象, 判断checked属性值 
            for (var i = 0; i < items.length; i++) {
                // 如果其他的input标签里面有checked属性值是false的
                if (items[i].checked === false) {
                    // 给变量赋值false
                    res = false;
                    // 只要有一个其他input没有选中,全选input就不会选中 
                    // 伪数组中之后的其他input也就不用循环判断了，使用break跳出当前整个循环
                    break;
                }
            }
            // 循环结束,  res存储的true或者false, 就是全选input标签checked属性的属性值
            // 将res作为属性值赋值给全选input标签的checked属性
            all.checked = res;
        })
    })
    </script>
</body>
</html>