js 全选反选问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
    body,
    dl,
    dt,
    dd,
    p {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Tahoma;
        font-size: 12px;
    }

    label,
    input,
    a {
        vertical-align: middle;
    }

    label {
        padding: 0 10px 0 5px;
    }

    a {
        color: #09f;
        text-decoration: none;
    }

    a:hover {
        color: red;
    }

    dl {
        width: 120px;
        margin: 10px auto;
        padding: 10px 5px;
        border: 1px solid #666;
        border-radius: 5px;
        background: #fafafa;
    }

    dt {
        padding-bottom: 10px;
        border-bottom: 1px solid #666;
    }

    dt label {
        font-weight: 700;
    }

    p {
        margin-top: 10px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oA = document.getElementsByTagName("a")[0];
        var aInput = document.getElementsByTagName("input");
        var oLabel = document.getElementsByTagName("label")[0];
        var isCheckAll = function() {
            for (var i = 1, n = 0; i < aInput.length; i++) {
                aInput[i].checked && n++;
            }
            aInput[0].checked = n == aInput.length - 1;
            oLabel.innerHTML = aInput[0].checked ? "全不选" : "全选"
        };
        //全选/全不选
        aInput[0].onclick = function() {
            for (var i = 1; i < aInput.length; i++) {
                aInput[i].checked = this.checked
            }
            isCheckAll()
        };
        //反选
        oA.onclick = function() {
            for (var i = 1; i < aInput.length; i++) {
                aInput[i].checked = !aInput[i].checked
            }
            isCheckAll()
        };
        //根据复选个数更新全选框状态
        for (var i = 1; i < aInput.length; i++) {
            aInput[i].onclick = function() {
                isCheckAll()
            }
        }
    }
    </script>
</head>

<body>
    <dl>
        <dt>
            <input type="checkbox" id="checkAll" />
            <label>全选</label><a href="javascript:;">反选</a></dt>
        <dd>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（一）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（二）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（三）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（四）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（五）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（六）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（七）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（八）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（九）</label>
            </p>
            <p>
                <input type="checkbox" name="item" />
                <label>选项（十）</label>
            </p>
        </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</body>

</html>
新手表示不明白isCheckAll那个函数和更新全选框状态是用来干嘛的，不用的话好像也有效果，请大神指教。
慕九州7009252
浏览 1175回答 1
1回答

习惯受伤
isCheckAll函数里面是根据选中复选框的个数更新是全选还是全不选的状态。如果你不需要这个功能，那么去掉也无妨
随时随地看视频慕课网APP