全选复选

<!-- 全选、复选 -->
    <div><input type="checkbox" id="slct_all">Select all</div>
    <div id="slct_others">
        <div><input type="checkbox" name="" id="">a</div>
        <div><input type="checkbox" name="" id="">b</div>
        <div><input type="checkbox" name="" id="">c</div>
        <div><input type="checkbox" name="" id="">d</div>
    </div>   

    <script>
        // 1. 全选 取消全选 决定下方复选框
        var slct_all = document.getElementById('slct_all');
        var slct_others = document.getElementById('slct_others').querySelectorAll('input');
        
        slct_all.onclick = function(){          
            for(i = 0; i < slct_others.length; i++){
                slct_others[i].checked = this.checked;  // 使所有复选框与全选框状态一致
            }           
        }

        //2. 下方复选决定全选
        for(i = 0; i < slct_others.length; i++){    // 给每个复选框绑定事件
            slct_others[i].onclick = function(){    
                var flag = true;    // 设置flag变量，如果有未选中的，flag值变为false
                for(i=0; i<slct_others.length; i++){    // 每次点击都遍历全部复选框
                    if(!slct_others[i].checked){
                        flag = false;
                        break;  //发现一个未被选中的，即跳出循环
                    }
                }
                slct_all.checked = flag;
            }
        }
        
    </script>