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

本文介绍了一种使用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;
            };

        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值