原生javascript和jquery实现全选、全不选和反选

最新推荐文章于 2024-01-23 19:19:19 发布

张_heng286

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量166

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_40888956/article/details/90044336

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Who is the best one?</title>
    <style type="text/css">
        *{
            background: greenyellow;
        }

    </style>
</head>

<body>
<input type="checkbox" class="quan" onclick="allSelect()"/>全选
<input type="checkbox" onclick="noSelect()"/>全不选
<div id="box">
    <input type="checkbox" />选我
    <input type="checkbox" />选我
    <input type="checkbox" />选我
    <input type="checkbox" />选我
    <input type="checkbox" />选我
    <input type="checkbox" />选我
</div>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript ">
    var array=[];
    function allSelect() {//全选方法
        var oBox = document.getElementById("box");
        var aInput = oBox.getElementsByTagName("input");
        for(var i = 0; i < aInput.length; i++) {
            aInput[i].checked = true;
        }
    }
    function noSelect() {//全不选方法
        var oBox = document.getElementById("box");
        var aInput = document.getElementsByTagName("input");
        for(var i = 0; i < aInput.length; i++) {
            aInput[i].checked = false;
        }
    }
    var oBox = document.getElementById("box");
    var aInput = oBox.getElementsByTagName("input");
    for(let i=0;i<aInput.length;i++){
        aInput[i].onclick=function(){//点击复选框，当选项中有一个没选中就取消全选
            if( aInput[i].checked == false){
                $(".quan").prop("checked", false);
            }
            str();//调用str()方法实现反选
        }
    }
    function str(){
        for(var i=0;i<aInput.length;i++){//实现当复选框全部选中 实现全选反之取消全选
            console.log( aInput[i].checked)
            if(aInput[i].checked==true){
                $(".quan").prop("checked", true);
            }
            if(aInput[i].checked==false){
                $(".quan").prop("checked", false);
                break;
            }
        }
    }
</script>
</body>

</html>