<style>
        body{padding:60px;font-size:12px;}
        ul,li{list-style:none;margin:10px 0;margin:0;padding:0;}
        input{  vertical-align: middle;  width:16px;height:16px;  }
</style>

<ul class="inputs">
   <li><input type="checkbox"> 单选</li>
   <li><input type="checkbox"> 单选</li>
   <li><input type="checkbox"> 单选</li>
   <li><input type="checkbox"> 单选</li>
   <li><input type="checkbox"> 单选</li>
   <li><input type="checkbox"> 单选</li>
</ul>
<div class="all">
    <input type="checkbox" id="all"> 全选
</div>


<script>
 window.onload=function(){
        var ul=document.getElementsByClassName("inputs")[0];
        var inputs=ul.getElementsByTagName("input");
        var all=document.getElementById("all");
        /*当每个input点击的时候 获取checked为true的个数 总数等于长度时 全选按钮自动勾选*/

        for(var i=0;i<inputs.length;i++){
            inputs[i].onclick=function(){
                var flag=0;
                for( var n=0;n<inputs.length;n++){
                    flag+=Number(inputs[n].checked)
                }
                if(inputs.length===flag){
                      all.checked=true;
                }else{
                    all.checked=false;
                }
            }
        }
       all.onclick=function(){
           if(this.checked){
                 for(var n=0;n<inputs.length;n++){
                      inputs[n].checked=true;
                  }
            }else{
                   for(var n=0;n<inputs.length;n++){
                       inputs[n].checked=false;
                   }
             }
        }
 }
</script>