表单按钮全选与取消全选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框全选</title>
</head>

<body>
    <input type="checkbox" name="sex" id="selectAll">全选
    <br>
    <div class="check">
        <input type="checkbox" name="sex" id="">
        <input type="checkbox" name="sex" id="">
        <input type="checkbox" name="sex" id="">
        <input type="checkbox" name="sex" id="">
    </div>

    <script>
    //获取全选按钮
        var selectAll = document.getElementById("selectAll");
        //获取复选框
        var check = document.querySelector(".check").querySelectorAll("input");
        selectAll.onclick = function () {
    
    
            /* console.log(this.checked); */
            //this.checked返回一个布尔值，如果为true则表示该选框被选中，否则未被选中
            for (var i = 0; i < check.length; i++) {
    
    
                check[i].checked = this.checked;
            }
        }
/*
	复选框都被选中，全选框才会被选中，每点击一次复选框，就对复所有的选框遍历一次，判断是否所以的复选框被选中，如果都被选中那么全选框也被选中，否则全选框不被选中
*/
        for (var i = 0; i < check.length; i++) {
    
    
            check[i].onclick = function () {
    
    
            //控制全选按钮是否被选中
                var flag = true;
                for (var i = 0; i < check.length; i++) {
    
    
                    if (!check[i].checked) {
    
    
                        flag = false;
                        //可有可无，主要为了提高效率
                        break;
                    }
                }
                selectAll.checked = flag;
            }
        }
    </script>
</body>

</html>
表单按钮全选与取消全选

猜你喜欢
