表单全选和取消全选案例

最新推荐文章于 2022-08-28 20:57:43 发布

Mir ㅤ

最新推荐文章于 2022-08-28 20:57:43 发布

阅读量302

点赞数

文章标签： html5 html javascript css vscode

本文链接：https://blog.csdn.net/weixin_45995139/article/details/120380870

版权

题目：通过一个按钮就可以对所有事件进行全部选择和全部取消选择

分析：
1. 全选和取消全选做法：让下面所有复选框的checked 属性(选中状态)跟随全选按钮即可；
2. 下面复选框全部选中时，上面的全选按钮也自动选中：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有没选中的，上面的全选按钮就不被选中；

<!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 {
            width: 300px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 15px;
        }

        thead tr {
            height: 30px;
            background-color: rgb(92, 193, 54);
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid yellowgreen;
            font-size: 12px;
            color: darkgreen;
        }
    </style>
</head>

<body>
    <div>
        <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>3元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>西兰花🥦</td>
                    <td>2.5元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>马铃薯🥔</td>
                    <td>1元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>小洋葱🧅</td>
                    <td>1.5元</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');

        // 注册事件
        j_cbAll.onclick = function () {
            // console.log(this.checked);  选中为true 否则为false
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }

        // 下面复选框全部选中时，上面的全选按钮也自动选中
        for (var i = 0; i < j_tbs.length; i++) {   //给小按钮绑定点击事件
            j_tbs[i].onclick = function () {
                // flag控制全选按钮是否选中
                var flag = true;
                // 检查小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        // j_cbAll.checked = false;
                        flag = false;
                        break;//只要有一个未选中其他的就不用循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

Mir ㅤ

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表单全选和取消全选案例

题目：通过一个按钮就可以对所有事件进行全部选择和全部取消选择分析： 1. 全选和取消全选做法：让下面所有复选框的checked 属性(选中状态)跟随全选按钮即可； 2. 下面复选框全部选中时，上面的全选按钮也自动选中：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有没选中的，上面的全选按钮就不被选中；<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫