js中轻松实现全选/全不选,全选,全不选,反选按钮功能

本文章实现功能通俗易懂,直接上代码
网页中body代码

<body>
    您的爱好很广泛!!!
    <br>
    <input type="checkbox" name="chekcItems" value="全选/全不选" id="select"
        onclick="fun1()" />全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球" onclick="fun3()" />足球
    <input type="checkbox" name="items" value="篮球" onclick="fun3()" />篮球
    <input type="checkbox" name="items" value="游泳" onclick="fun3()" />游泳
    <input type="checkbox" name="items" value="唱歌" onclick="fun3()" />唱歌
    <br>
    <input type="button" name="checkall" id="checkall" value="全选" />
    <input type="button" name="checkall" id="checknotall" value="全不选" />
    <input type="button" name="checkall" id="checkreverse" value="反选" />
</body>

script中代码

<script type="text/javascript">
    document.getElementById("checkall").onclick = function() {//点击全选按钮
        //name属性获取要操作的复选框
        var a = document.getElementsByName("items");
        for (var i = 0; i < a.length; i++) {
            a[i].checked = true;//全部默认为true
        }
        document.getElementById("select").checked = true;//控制全选反选按钮
    }
    document.getElementById("checknotall").onclick = function() {//点击全不选按钮
        //通过name属性获取要操作的复选框
        var a = document.getElementsByName("items");
        for (var i = 0; i < a.length; i++) {
            a[i].checked = false;//全部默认为false
        }
        document.getElementById("select").checked = false;//控制全选反选按钮
    }
    document.getElementById("checkreverse").onclick = function() {//点击反选按钮
        //通过name属性获取要操作的复选框
        var a = document.getElementsByName("items");
        for (var i = 0; i < a.length; i++) {
            if (a[i].checked) {
                a[i].checked = false;
            } else {
                a[i].checked = true;
            }
        }
        var is = null;
        for (var i = 0; i < a.length; i++) {//控制全选反选按钮
            if(a[i].checked==false){
                is=false;
            }
        }
        if(is==false){
            document.getElementById("select").checked = false;
        }else{
            document.getElementById("select").checked = true;
        }
    }
    function fun1() {//点击全选全不选按钮
        if (document.getElementById("select").checked) {
            var a = document.getElementsByName("items");
            for (var i = 0; i < a.length; i++) {
                a[i].checked = true;//全部默认为true
            }
        } else {
            var a = document.getElementsByName("items");
            for (var i = 0; i < a.length; i++) {
                a[i].checked = false;//全部默认为false
            }
        }
    }
    function fun3() {//点击复选框子选按钮
        var a = document.getElementsByName("items");
        var is = null;
        for(var i=0;i<a.length;i++){
            if(a[i].checked==false){
                is=false;
            }
        }
        if(is==false){
            document.getElementById("select").checked = false;
        }else{
            document.getElementById("select").checked = true;
        }
    }
</script>

js中轻松实现全选/全不选,全选,全不选,反选按钮功能

猜你喜欢