js实现复选框的全选和反选功能


一共需要实现两个功能,第一个是,当thead中的复选框选中☑️时,tbody中的复选框都选中checked,反之,都不选中;第二个是,当tbody中的复选框都选中时,thead中的复选框选中;当tbody中的复选框有一个没选中,thead中的复选框不选中。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <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="selectAll" />
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>

            <!--每一个菜的选项-->
            <tbody id="cai">
                <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>
        //1.获取元素
        var selectAll = document.querySelector('#selectAll');
        var ipts = document.querySelectorAll('#cai input');
        //2.设置全选事件
        selectAll.onclick = function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = selectAll.checked;//tbody中的复选框的选中状态和thead中的选中状态相同即可
            }
        }
        //3.设置反选事件
        //设置计数器,用来计算tbody中选中状态的复选框个数
        var count = 0;
        for (var i = 0; i < ipts.length; i++) {
            ipts[i].onclick = function () {
                this.checked?count++:count--;
                selectAll.checked =count===ipts.length;//判断count和tbody中的复选框个数是否相等,如果相等thead中复选框选中,反之这不选中
            }
        }
    </script>
</body>
</html>```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值