SOURCE

var allBtn = document.getElementById("all");
var selBtns = document.getElementsByName("a");
var txt = document.getElementById("txt");
var index = -1;
allBtn.onclick=function(){//全选/全不选
	   for(var i=0;i<selBtns.length;i++){
	      selBtns[i].checked = this.checked;
	   }
	   if(this.checked){
	    index = selBtns.length -1;
		  txt.innerHTML = "取消全选";
	   }else{
	    index = -1;
		  txt.innerHTML = "全选";
	   }
}

for(var i=0;i<selBtns.length;i++){//子按钮全部选中/不全部选中
     selBtns[i].onclick=function(){
     if(this.checked==true){
	   index++;
	 }else{
	  index--;
	 }
	 console.log(index);
	 if(index==selBtns.length-1){
	   allBtn.checked = true;
	   txt.innerHTML = "取消全选";
	 }else{
	   allBtn.checked = false;
	   txt.innerHTML = "全选";
	 }
   }
}

<div>
<input type="checkbox" id="all"><span id="txt">全选</span>
</div>
<div id="selected">
<input type="checkbox" name="a">1
<input type="checkbox" name="a">2
<input type="checkbox" name="a">3
<input type="checkbox" name="a">4
<input type="checkbox" name="a">5
<input type="checkbox" name="a">6
<input type="checkbox" name="a">7
<input type="checkbox" name="a">8
<!-- 子复选框可随意添加 -->
</div>