js实现全选全不选反选

Posted 带着蚂蚁去散步

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现全选全不选反选相关的知识,希望对你有一定的参考价值。

一个js的简单实验

思路:通过 document.getElementsByTagName(\'input\')获取集合,判断类型是否为checkbox,再对其进行操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <input type="checkbox" name="fruit" value="苹果">苹果
        <input type="checkbox" name="fruit" value="香蕉">香蕉
        <input type="checkbox" name="fruit" value="芒果">芒果
        <input type="checkbox" name="fruit" value="葡萄">葡萄
    </form>
    <button id="all">全选</button>
    <button id="not">全不选</button>
    <button id="reve">反选</button>

    <script>
        var all = document.getElementById(\'all\');
        var not = document.getElementById(\'not\');
        var reve = document.getElementById(\'reve\');
        var fruit = document.getElementsByTagName(\'input\');
        //全选
        all.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == \'checkbox\'){
                    fruit[i].checked = true;
                }
            }
        };
        //全不选
        not.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == \'checkbox\'){
                    fruit[i].checked = false;
                }
            }
        };
        //反选
        reve.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == \'checkbox\'){
                    /*if(fruit[i].checked == true){
                        fruit[i].checked = false;
                    }else{
                        fruit[i].checked = true;
                    }*/
                    fruit[i].checked = !fruit[i].checked;
                }
            }
        };
    </script>
</body>
</html>

 

 

以上是关于js实现全选全不选反选的主要内容,如果未能解决你的问题,请参考以下文章

纯js实现checkbox的全选反选全不选

Vue实现单选、全选和反选

jquery全选反选全不选代码

js实现全选全不选反选

js复选框实现全选全不选反选

利用js实现全选反选全不选(button)