JS修炼-复习篇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var ballNodeList = document.getElementsByName("ball");
            var ckbId = document.getElementById("ckb");
            ckbId.onclick = function () {
                var bool = ckbId.checked;
                var ballList = document.getElementsByName("ball");
                for (var i = 0; i < ballList.length; i++) {
                    var ballEle = ballList[i];
                    ballEle.checked = bool;
                }
            };

            var allCk = document.getElementById("allChecked");
            allCk.onclick = function () {
                ballNodeList.forEach(function (value, index, arr) {
                    arr[index].checked = true;
                });
                ckbId.checked = true;
            };

            var allNoCk = document.getElementById("removeAllCk");
            allNoCk.onclick = function () {
                ballNodeList.forEach(function (value, index, arr) {
                    arr[index].checked = false;
                });
                ckbId.checked = false;
            };

            var fxEle = document.getElementById("fx");
            fxEle.onclick = function () {
                var num = 0;
                ballNodeList.forEach(function (value, index, arr) {
                    arr[index].checked = !arr[index].checked;
                    if (!arr[index].checked) {
                        num++;
                    }
                });
                ckbId.checked = num > 0 ? false : true;
            };

            ballNodeList.forEach(function (value, index, listObj) {
                listObj[index].onclick = function () {
                    ckbId.checked = checkedEle(ballNodeList);
                }
            });

            function checkedEle(list){
                for(var i = 0;i<list.length;i++){
                    if(!list[i].checked){
                        return false;
                    }
                }
                return true;
            }
        }
    </script>
</head>
<body>
<p>
    你爱好的运动是：<input type="checkbox" id="ckb"/>全选/全不选<br/>
    <input type="checkbox" name="ball"/>足球
    <input type="checkbox" name="ball"/>篮球
    <input type="checkbox" name="ball"/>羽毛球
    <input type="checkbox" name="ball"/>乒乓球<br/>
    <button id="allChecked">全选</button>
    <button id="removeAllCk">全不选</button>
    <button id="fx">反选</button>
    <button>提交</button>
</p>
</body>
</html>
猜你喜欢
