利用js实现复选框一件全选

点击上方的复选框，下面的所有效果都和上面的相同

      1.首先获取总控件和子控件

代码：

    var ocheck = document.getElementById("check");
    var ochecks = document.getElementsByClassName("son-check");

1. 获取上面的一个复选框
2. 获取下面的所有复选框
3. 确定点的是谁，上面是否选中用对象名.checked表示，再把true（选中）和flase（未选中）设置对应的复选框

代码：

ocheck.onclick = function () {
        for (var i = 0; i < ochecks.length; i++) {
            if (ocheck.checked == true) {
                ochecks[i].checked = true;
            } else {
                ochecks[i].checked = false;
            }
        }
    }

到此我们就可以实现点击上方的总复选框下面的子复选框全部处于选中状态

接下来我们实现选中所有子项，总的复选框自动选中，和取消一个子复选框总复选框自动取消选中状态

1. 下面全部的选中（下面的对象名.checked都等于true），上面才是true
2. 给下面每一个都添加一个点击事件（for循环），每点击一次都要判断checked是否都为true（先把为数组转为【…数组】，然后可以用数组中的.every方法）

代码如下：

for (var i = 0; i < ochecks.length; i++) {
        ochecks[i].onclick = function () {
            var flag = [...ochecks].every(function (item, index) {
                return item.checked;
            })
            ocheck.checked = flag;
        }
        
    }

值得注意的是，ocheck.checked = flag;这一段代码必须写在点击事件的方法体中，让 每一次点击子复选框时总复选框均重新赋一次值