原生javascript全选小功能（事件委托）

最新推荐文章于 2022-03-06 20:32:29 发布

桃花朵朵开3

最新推荐文章于 2022-03-06 20:32:29 发布

阅读量238

点赞数

分类专栏：小白笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_48445738/article/details/108679754

版权

小白同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

笔记

36 篇文章 0 订阅

订阅专栏

怎么才算全选？

无非就是当前也面的所有数据都被勾选了
因此我们需要给每个复选框都添加事件或者使用事件代理
现有这样的页面
在这里插入图片描述
代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
    <style>
        .div {
            margin: auto;
            width: 1200px;
            border: 1px solid #999;
        }
        
        .div ul {
            list-style: none;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .div ul:nth-of-type(2n) {
            background-color: #999;
        }
        
        .div ul:nth-of-type(2n+1) {
            background-color: wheat;
        }
        
        .div ul li {
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="div">
        <ul>
            <li>全选<input id="checkall" type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
    </div>
</body>

</html>

我们来实现全选
我们用事件委托来实现

一，获取父级元素

二，给父级绑定事件（事件委托）

   var div = document.querySelector('.div')
        div.onclick = function(e) {}

三，判断点击的是不是全选

e.targe：获取点击源上面页面中我设置了一个id

   var div = document.querySelector('.div')
        div.onclick = function(e) {
            e = e || window.e
            if (e.target.id == "checkall") {  //判断id是不是全选的id
           
            }
         }

 var div = document.querySelector('.div')
        div.onclick = function(e) {
            e = e || window.e
            if (e.target.id == "checkall") {  //判断id是不是全选的id
             if (e.target.id == "checkall" && e.target.checked) { //判断是否选中 不加上一层判断会出现 点不了其他复选框
                    for (var i = 1; i < this.children.length; i++) {
                    //如果全选了 设置其他的也选中
                        this.children[i].children[0].children[0].checked = true //这里找节点不懂的 同学可以去看看dom知识点结合页面结构看
                    }
                } else {
                //如果没全选 设置其他的也没选中
                    for (var i = 1; i < this.children.length; i++) {
                        this.children[i].children[0].children[0].checked = false
                    }
                }
            }
         }

四，判断其他复选框有没有选中

		 var div = document.querySelector('.div')
        div.onclick = function(e) {
            e = e || window.e
            if (e.target.id == "checkall") {
                if (e.target.id == "checkall" && e.target.checked) {
                    for (var i = 1; i < this.children.length; i++) {
                        this.children[i].children[0].children[0].checked = true
                    }
                } else {
                    for (var i = 1; i < this.children.length; i++) {
                        this.children[i].children[0].children[0].checked = false
                    }
                }
            }
            //判断其他复选框有没有选中
            if (e.target.type == "checkbox") {
                var isok = true;  //设置一个开关用来判断其他的复选框是否选中
                for (var i = 1; i < this.children.length; i++) {
                    if (!this.children[i].children[0].children[0].checked) {
                        document.getElementById("checkall").checked = false //如果其他的复选框有一个没选中 全选取消选中
                        isok = false;//如果其他的复选框有一个没选中 值设为false
                    }
                }
                //判断是否都选中
                if (isok) {
                    document.getElementById("checkall").checked = true
                }
            }
        }

在这里插入图片描述

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
    <style>
        .div {
            margin: auto;
            width: 1200px;
            border: 1px solid #999;
        }
        
        .div ul {
            list-style: none;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .div ul:nth-of-type(2n) {
            background-color: #999;
        }
        
        .div ul:nth-of-type(2n+1) {
            background-color: wheat;
        }
        
        .div ul li {
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="div">
        <ul>
            <li>全选<input id="checkall" type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ul>
            <li><input type="checkbox"></li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
    </div>
    <script>
        var div = document.querySelector('.div')
        div.onclick = function(e) {
            e = e || window.e
            if (e.target.id == "checkall") {
                if (e.target.id == "checkall" && e.target.checked) {
                    for (var i = 1; i < this.children.length; i++) {
                        this.children[i].children[0].children[0].checked = true
                    }
                } else {
                    for (var i = 1; i < this.children.length; i++) {
                        this.children[i].children[0].children[0].checked = false
                    }
                }
            }
            if (e.target.type == "checkbox") {
                var isok = true;
                for (var i = 1; i < this.children.length; i++) {
                    if (!this.children[i].children[0].children[0].checked) {
                        document.getElementById("checkall").checked = false
                        isok = false;
                    }
                }
                if (isok) {
                    document.getElementById("checkall").checked = true
                }
            }
        }
    </script>
</body>

</html>

最后实现全选小功能

桃花朵朵开3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript全选小功能（事件委托）

怎么才算全选？无非就是当前也面的所有数据都被勾选了因此我们需要给每个复选框都添加事件或者使用事件代理现有这样的页面代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫