js求助帖

先上代码 布局部分

 <div class="box">
    <div class="bb"><input type="checkbox">全选</div>
    <ul>
        <li><input type="checkbox"></li>
        <li><input type="checkbox"></li>
        <li><input type="checkbox"></li>
        <li><input type="checkbox"></li>
    </ul>
</div> 

css部分

  * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style-type: none;
    }

    i {
        font-style: normal;
        margin-left: 20px;
    }

    .box {
        width: 300px;
        height: 300px;
        margin: 100px auto;
    } 


代码部分
  var b = document.querySelector('.bb').querySelector('input');
var f = document.querySelector('.box');
var lis = f.children[1].querySelectorAll('input');
console.log(lis);
b.onclick = function () {
    for (i = 0; i < lis.length; i++) {
        lis[i].checked = this.checked;
    }
}
for (i = 0; i < lis.length; i++) {
    var r = true;
    lis[i].onclick = function () {
        for (i = 0; i < lis.length; i++) {
            if (lis[i].checked == false) {
                b.checked = false;
                break;
            } else {
                b.checked = r;
            }
        }

    }
}

```

问题就是当我把这个break去掉时，当我下面的input有没选中的，上面的全选input还是一个选中状态。

有大佬可以说一下这是因为什么吗？ 谢谢