JavaScript案例之全选影响小选案例

最新推荐文章于 2024-07-06 16:47:02 发布

虽无意逐鹿.

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量41

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44991471/article/details/131421674

版权

JavaScript案例之全选影响小选案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 600px;
            /* 合并单元格间隙 */
            border-collapse: collapse;
            border-spacing: 0;
            margin: 100px auto;
            text-align: center;
        }

        table th {

            font-size: large;
            height: 24px;
        }

        td {
            border: 2px solid #000;
            padding: 10px;

        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type="checkbox" name="" id="checkAll"><span class="all">全选</span></th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox" class="ck"></td>
            <td>华为手机</td>
            <td>华为</td>
            <td>￥3999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox" class="ck"></td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox" class="ck"></td>
            <td>苹果手机</td>
            <td>苹果</td>
            <td>￥9999</td>
        </tr>

    </table>
    <script>
        // 1.大全选择框影响小选择框
        // 获取大小复选框元素
        const checkAll = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')
        // 点击大选择框注册事件
        checkAll.addEventListener('click', function () {
            // 遍历所有小选择框,让小选择框的checked=大选择框的checked
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = this.checked
            }
        })
        // 2.小选择框影响大全选择框
        for (let i = 0; i < cks.length; i++) {
            // 点击小选择框注册事件
            cks[i].addEventListener('click', function () {
                //判断小选择框的个数和选中的个数是否相等，通过布尔值来影响全选的状态
                let flag = document.querySelectorAll('.ck:checked').length === cks.length
                // console.log(flag);
                checkAll.checked = flag
            })
        }

    </script>
</body>

</html>

虽无意逐鹿.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript案例之全选影响小选案例

/ 遍历所有小选择框,让小选择框的checked=大选择框的checked。//判断小选择框的个数和选中的个数是否相等，通过布尔值来影响全选的状态。// 1.大全选择框影响小选择框。// 2.小选择框影响大全选择框。/* 合并单元格间隙 */// 点击大选择框注册事件。// 点击小选择框注册事件。// 获取大小复选框元素。
复制链接

扫一扫