JavaScript - 全选onclick事件 -

赵羽珩

于 2017-12-11 22:38:45 发布

阅读量665

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="btn">全选</p>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <script type="text/javascript">
        window.onload = function () {
            //获取元素
            var oBtn = document.getElementById('btn');
            var aInput = document.getElementsByTagName('input');

            oBtn.onclick = function () {      //点击"按钮"事件
                if (aInput[0].checked == false) {       // if判断、第一个复选框为 false
                    for (var i = 0; i < aInput.length; i++) {
                        aInput[i].checked = true;       // for循环、全部复选框为 true
                    }
                }else {                                 // else判断、第一个复选框为 true
                    for (var i = 0; i < aInput.length; i++) {
                        aInput[i].checked = false;      // for循环、全部复选框为 false
                    }
                }
            }
        }
    </script>
</body>
</html>