原生js实现全选全不选反选

最新推荐文章于 2023-06-12 10:35:39 发布

weixin_33738555

最新推荐文章于 2023-06-12 10:35:39 发布

阅读量657

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bcc0c7c6fb9a05d212ed0c3

版权

一、思路

1、全选/全不选：

（1）监听全选按钮的点击事件，通过遍历每一个input标签，设置其状态设置为全选按钮的状态，来实现全选和全不选。

（2）更新全选框的状态，判断全选框状态的更新函数可以通过计数input[i]处于选中状态的个数（n）来设计，如果n == length，全选框为选中状态，后面的文字变成“全不选”；否则，全选框为未选中状态，后面的文字为“全选”。

2、input复选框的状态改变时，也会相应的改变全选框的状态。

为了优化网页性能，使用事件委托，监听其父元素的点击事件，事件委托的原理即事件冒泡，所以我们点击div里面的input时，它会根据冒泡原理，执行其父元素上的监听事件。而具体点击的哪一个input，可以通过target对象获取到。

3、反选

反选即让oInput[i].checked = !oInput[i].checked;

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            border:1px solid #000;
            border-radius: 5px;
            background: #d2d2d2;
            /*水平垂直居中*/
            width:150px;
            height:500px;
            position: absolute;
            left:0;
            top:0;
            bottom: 0;
            right:0;
            margin:auto;
        }
        #checkAll,#checkReverse{
            margin-left: 20px;
        }
        #hr{
            width: 80%;
            border: 1px solid #000;
        }
        div{
            margin-left: 20px;
        }

    </style>
</head>
<body>
<div id="box">
    <input type="checkbox" id="checkAll"/><label for="checkAll" id="checkAllLabel">全选</label>
    <a href='#' id="checkReverse">反选</a>
    <hr id="hr">
    <div id="city">
    </div>
</div>
</body>
<script>
    window.onload = function(){
        let ocheckAll = document.getElementById('checkAll');
        let oCity = document.getElementById('city');
        let ocheckAllLabel = document.getElementById('checkAllLabel');
        let oInput = oCity.getElementsByTagName('input');
        let ocheckReverse = document.getElementById('checkReverse');
        //初始化数据
        let arr = ['北京','上海','广州','深圳','厦门'];
        let str = "";
        for(let i = 0; i < arr.length; i++){
            str += '<div><input type="checkbox"><label>'.concat(arr[i]).concat('</label></div>');
        }
        oCity.innerHTML = str;
        //全选、全不选
        ocheckAll.addEventListener('click',function(){
            for(let i = 0; i < oInput.length; i++){
                //优化2 根据全选的状态去决定城市的状态，这样全选和全不选一块实现了                
                oInput[i].checked = this.checked;   
            }
            isCheckAll();
        });
        //跟新全选框状态
        function isCheckAll(){
            //优化1  根据选中的复选框数是否等于length判断全选全不选的状态
            for(var i = 0, n = 0; i < oInput.length; i++){
                oInput[i].checked && n++;
            }
            ocheckAll.checked = n === oInput.length;
            ocheckAllLabel.innerText = ocheckAll.checked?'全不选':'全选';

        }
        //根据复选框个数跟新全选框的状态
        oCity.addEventListener('click',function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;//为了兼容IE
            if(target.nodeName.toLowerCase() === 'input'){
                isCheckAll();
            }
        },true);
        //反选
        ocheckReverse.addEventListener('click',function(){
            for(let i = 0; i < oInput.length; i++){
                oInput[i].checked = !oInput[i].checked;
            }
            isCheckAll();
        });
    };
</script>
</html>复制代码

效果图：

weixin_33738555

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现全选全不选反选

一、思路1、全选/全不选：（1）监听全选按钮的点击事件，通过遍历每一个input标签，设置其状态设置为全选按钮的状态，来实现全选和全不选。（2）更新全选框的状态，判断全选框状态的更新函数可以通过计数input[i]处于选中状态的个数（n）来设计，如果n == length，全选框为选中状态，后面的文字变成“全不选”；否则，全选框为未选中状态，后面的文字为“全选”。2、input复选框的状态改变时，...
复制链接

扫一扫