全选全不选案例

最新推荐文章于 2023-02-28 21:58:39 发布

产品迪

最新推荐文章于 2023-02-28 21:58:39 发布

阅读量614

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109549489

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

全选框案例：

先看效果图：

在这里插入图片描述

核心思路如下：

全选点击事件： 单选checked状态跟随全选
单选for循环点击事件： 默认flag = ture；只要有一个按钮没选中，flag = false 即全选框就不勾选

scirpt核心代码如下：

//全选点击事件，单选跟随全选
        allCheck.onclick = function () {
            for (var i = 0; i < oneChecks.length; i++) {
                oneChecks[i].checked = this.checked;
            }
        }
        //单选按钮循环注册点击事件
        for (var i = 0; i < oneChecks.length; i++) {
            oneChecks[i].onclick = function () {
                //
                var flag = true;
                //遍历按钮，只要有一个按钮没选中，全选框就不勾选
                for (var i = 0; i < oneChecks.length; i++) {
                    if (!oneChecks[i].checked) {
                        flag = false;
                    }
                }
                //
                allCheck.checked = flag;
            }
        }

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            margin-top: 100px;
        }
        table thead {
            background-color: cornflowerblue;
        }
        table tbody {
            background-color: whitesmoke;
            cursor: pointer;
        }
        .bg {
            background-color: #a7cbff;
        }
    </style>
</head>
<body>
    <table align="center" border="0" width="300px" height="200px" cellspacing="1">
        <thead align="center">
            <tr>
                <td><label><input id="a_All" class="checkAll" type="checkbox"/>全选</label></td>
                <th>手机款式</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input class="checkOne" type="checkbox" name="phone"></td>
                <td>iPhone 8</td>
                <td>¥ 2000</td>
            </tr>
            <tr>
                <td><input class="checkOne" type="checkbox" name="phone"></td>
                <td>iPhone X</td>
                <td>¥ 4000</td>
            </tr>
            <tr>
                <td><input class="checkOne" type="checkbox" name="phone"></td>
                <td>iPhone 11</td>
                <td>¥ 5000</td>
            </tr>
            <tr>
                <td><input class="checkOne" type="checkbox" name="phone"></td>
                <td>iPhone 12</td>
                <td>¥ 6000</td>
            </tr>
        </tbody>
    </table>
    <script>
        var allCheck = document.getElementById('a_All');
        var oneChecks = document.querySelector('tbody').querySelectorAll('input');
        var trs = document.querySelector('tbody').querySelectorAll('tr');


        //全选点击事件，单选跟随全选
        allCheck.onclick = function () {
            for (var i = 0; i < oneChecks.length; i++) {
                oneChecks[i].checked = this.checked;
            }
        }
        //单选按钮循环注册点击事件
        for (var i = 0; i < oneChecks.length; i++) {
            oneChecks[i].onclick = function () {
                //
                var flag = true;
                //遍历按钮，只要有一个按钮没选中，全选框就不勾选
                for (var i = 0; i < oneChecks.length; i++) {
                    if (!oneChecks[i].checked) {
                        flag = false;
                    }
                }
                //
                allCheck.checked = flag;
            }
        }
        //循环注册鼠标事件 划过变色
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>
</html>

产品迪

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
全选全不选案例

全选框案例：先看效果图：核心思路如下：全选点击事件：单选checked状态跟随全选单选for循环点击事件：默认flag = ture；只要有一个按钮没选中，flag = false 即全选框就不勾选scirpt核心代码如下：//全选点击事件，单选跟随全选 allCheck.onclick = function () { for (var i = 0; i < oneChecks.length; i++) {
复制链接

扫一扫