初学js，bug 不太会找，求解决，求方法。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }        div {
            width: 320px;

            margin: 100px auto;
        }        ul {
            padding: 0;
            margin: 0;
        }        li {
            list-style: none;
            height: 40px;
            line-height: 40px;
            border-bottom:1px solid #fff;
        }        .span1 {
            margin-left: 10px;
        }        .span2 {
            margin-left: 100px;
        }        #check {
            margin: 0;
            padding: 0;
            height: 25px;
            border-bottom: 2px solid #000;
            background: #f7f7f7;
        }
    </style>
    <script>
        window.onload = function () {            var oDiv = document.getElementById("div1");
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            var aDiv = document.getElementById("check");
            var aInput = aDiv.getElementsByTagName("input")[0];
            var oSpan = aDiv.getElementsByTagName("span")[0];
var n=0;//代表点击复选框的时候，选中的个数
            var oldCor = '';
            for (var i = 0; i < aLi.length; i++) {
                if (i % 2) {
                    aLi[i].style.background = "#f7ffff";
                } else {
                    aLi[i].style.background = "#fff";
                };
                aLi[i].onmouseover = function () {
                    oldCor = this.style.background;
                    this.style.background = '#efefef';
                };
                aLi[i].onmouseout = function () {
                    this.style.background = oldCor;
                };
aLi[i].children[0].onclick=function()
{
if(this.checked)
{
n++;
}
else
{
n--;
}
if(n==aLi.length)
{
aInput.checked=true;
}
else
{
aInput.checked=false;
}
document.title=n;
}

            };            aInput.onclick = function () {
                for (var i = 0; i < aLi.length; i++) {
                    var inputs = aLi[i].getElementsByTagName("input")[0];
inputs.checked=this.checked;
if(this.checked)
{
n=aLi.length;
}
else
{
n=0;
}
                };
            };
        };
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
            <li>
                <input type="checkbox" /><span class="span1">私奔</span><span class="span2">梁博</span>
            </li>
        </ul>
        <div id="check">
            <input type="checkbox" /><span class="span1">全选</span>
        </div>    </div>
</body>
</html>
aInput.onclick = function () {
                for (var i = 0; i < aLi.length; i++) {
                    var inputs = aLi[i].getElementsByTagName("input")[0];
                    if (aInput.checked) {
                        inputs.checked = true;
                        aLi[i].style.background = '#efefef';
                        oSpan.innerHTML = '反选';
                    } else {
                        inputs.checked = false;
                        oSpan.innerHTML = '全选';
                        for (var i = 0; i < aLi.length; i++) {
                            if (i % 2) {
                                aLi[i].style.background = "#f7ffff";
                            } else {
                                aLi[i].style.background = "#fff";
                            };
                        };
                    };
                };
                console.log(inputs.checked);
            };
问题出在onclick这里，两个for循环都用了i变量，后者覆盖了前者，第两个for循环改成别的变量就行了

调试易

初学js，bug 不太会找，求解决，求方法。

解决方案 »