【JS实现】表单全选和取消全选

效果

技术点

没什么技术点,主要看思想

代码

<!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>
    <style>
        table {
            margin: 0 auto;
        }
        thead {
            background-color: blue;
        }
    </style>
</head>
<body>
    <table border="1px" cellpadding="10px" cellspacing="0" width="400px">
        <thead>
            <tr>
                <td><input type="checkbox" id="tbox"></td>
                <td>商品</td>
                <td>价钱</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Ipad Ari</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tbox = document.querySelector('#tbox');
        var bobox =document.querySelector('tbody').querySelectorAll('input');
        tbox.addEventListener('click', function() {
            for (var i = 0; i < bobox.length; i++) {
                // 这时把全选按钮的状态给子按钮
                bobox[i].checked = this.checked;
            }
        })
        // 给下面全部复选框绑定点击事件
        for (var i = 0; i < bobox.length; i++) {
            bobox[i].addEventListener('click', function() {
                // flag控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查下面的复选框是否全被选中
                for (var i = 0; i < bobox.length; i++) {
                    if (!bobox[i].checked) {
                        flag = false;
                        break;//退出for循环,提高执行效率,只要有一个没被选中,剩下的就无需判断了
                    }
                }
                tbox.checked = flag;
            })
        }
    </script>
</body>
</html>
本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.zhoubaiwl.club/3254.htm
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录