Js实现全选反选按钮功能

最新推荐文章于 2023-08-29 00:29:05 发布

嘘 -你听

最新推荐文章于 2023-08-29 00:29:05 发布

阅读量1.8k

点赞数 2

分类专栏： js html java 文章标签： js java javascript

本文链接：https://blog.csdn.net/weixin_44657829/article/details/105740105

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

Js实现全选反选按钮功能（jQuery实现：https://blog.csdn.net/weixin_44657829/article/details/106043130）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" name="interest"> 篮球 <br>
<input type="checkbox" name="interest"> 读书 <br>
<input type="checkbox" name="interest"> 电影 <br>
<input type="checkbox" name="interest"> 阅读 <br>
<hr>
<input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
<button id="selectReverse " onclick="Reverse()">反选</button>
</body>
<script>
    var interest = document.getElementsByName('interest');
    var selectAllOrNot = document.getElementById('selectAllOrNot');
    // var selectReverse = document.getElementById('selectReverse');

    // onchange 是改变状态, 应用场景有三个地方: checkbox, 单选的select,  radio
    selectAllOrNot.onchange = function() {//1.获取当前状态
        // 获取到当前所操作的 checkbox的状态, 值为true或者false
        var status = this.checked;;//2.创建状态对象（T/F）
        // 让所有的interests的 checked 状态和 "全选/全不选" 状态保持一致。
        for(var i = 0; i < interest.length; i++){//3.遍历对象，
            interest[i].checked = status;//4.将当前的状态赋值给对象
        }
    };
    var interestLenght = interest.length;//5.创建对象长度

    //循环的目的是给每个 interest 绑定改变事件。
    for(var i = 0; i < interestLenght; i++) {//6.遍历对象

        /**
         * 每次对每个 interest改变之后, 判断所有的 interest 的状态. 判断的思路
         * 是获取所有的选中的 interest 的数量, 然后与 interest的总数量做比较，如果
         * 数量相同表示都被选中, 那么"全选/全不选"就要被选中，如果数量不相同，那么"全选/全不选"就不选中
         */
        interest[i].onchange = function() {//7.获取对象当前状态
            var num = 0;
            for(var j = 0; j < interestLenght; j++) {//8.遍历对象
                // 如果有一个被选中，num就 +1
                if(interest[j].checked) {//9.判断对象的状态
                    num++;//10.如果选中了就将变量num加一
                }
            }
            // 根据选中数量与总长度是否相同来确定"全选/全不选"最终的选中状态
            selectAllOrNot.checked = (num == interestLenght);//11.根据选中的个数与对象的长度进行
            // 比较如果相等，则选中，否则未选中
        }
    }
    //12.完成取反功能，单机按钮则取消选中对象，选中未选中对象。
    function Reverse () {

         var chas=true;
        for(var k=0;k<interestLenght;k++){
            var chass =interest[k].checked;
        if(chass){
            chas=false;
        }
        interest[k].checked= !chass;
        }
        selectAllOrNot.checked=chas;

    }

</script>
</html>