大型电商网站购物车案例 ----- 全选与反选

最新推荐文章于 2023-06-18 16:52:09 发布

YuaKeNG

最新推荐文章于 2023-06-18 16:52:09 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Yuake2/article/details/105327318

本文介绍了一种使用CSS进行样式美化，并结合JavaScript实现表格全选与单选联动功能的方法。通过简单的代码示例，展示了如何在网页中创建响应式的表格布局，以及如何通过监听复选框的点击事件来更新所有子项的选择状态。

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

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧肉</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>油炸榴莲</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>清蒸助教</td>
                    <td>田老师</td>
                </tr>
            </tbody>
        </table>
    </div>

<script src="publick.js"></script>
function my$(id){
    return document.getElementById(id);
}

 // 获取全选的这个复选框
        var ckAll = my$("j_cbAll");
        // 获取tbody里面的所有的复选框
        var cks = my$("j_tb").getElementsByTagName("input"); //集合，伪数组
        // 点击按钮，先通过点击事件获取到复选框的状态，然后循环遍历tbody里面的所有的复选框，让这些所有的复选框的状态跟我们前面的一样状态--思路和思路
        ckAll.onclick = function() {
            // alert("123"); 测试代码
            //console.log(this.checked);
            // 思路来了：让所有的tbody里面的复选框跟this.checked一样不就ok了--思想
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked;
            }

        };

        // 第二步核心思想
        // 获取tbody所有的复选框,循环遍历分别注册点击事件
        for (var i = 0; i < cks.length; i++) {
            // 下面就是给每个复选框做点击事件
            cks[i].onclick = function() {
                // 假设被选中了 立一个 flag
                var flag = true; //假设的被选中了，就是我们创造的条件
                // 我们要循环遍历拿到每个复选框然后判断到底有没有被选中呀
                for (var j = 0; j < cks.length; j++) { //为了下面判断每个复选框有没有被选中
                    // 判断,如果被选中了，都不会进入这个if，只要没有被选中才会进来
                    if (!cks[j].checked) { //没有被选中 false 已取反 !false == true
                        // 没有被选中才会进来啊。代码不难，练的是你的大脑
                        flag = false; //没被选中
                        break //规范---这个也是我们前面学过的，只要有一个没有被选中直接结束，不用往下判断了
                    }
                }
                ckAll.checked = flag;
            };

        }