js复选框的全选与子选的操作问题解决方案

当我碰到这个问题的时候，才刚刚学到，自己方根本不明所以，所以在网上寻求资料，但是找了两三中，中间还是会出现问题，所以借鉴网上资料后，自己完善了一下。
提前下好的html

<input type="checkbox" id="all"  οnclick="aall()">全选<br>
		<hr>
		<div >
			<input type="checkbox" name="lover[]" value="1" οnclick="setAll()">篮球<br>
			<input type="checkbox" name="lover[]" value="2" οnclick="setAll()">足球<br>
			<input type="checkbox" name="lover[]" value="3" οnclick="setAll()">排球<br>
			<input type="checkbox" name="lover[]" value="4" οnclick="setAll()">乒乓球<br>
		</div>

script代码

<script >
			//子选择框选中后，全选的选择框，为false，当四个子选择都选了之后，全选选择框为true
			function setAll() {
				var ch = document.getElementsByName("lover[]");
				var all = document.getElementById("all");
				var j = 0;
				for(i = 0 ; i < ch.length ; i++){
					if (ch[i].checked) {
						j = j+1;
						if(j==4){
							all.checked=true;
						}else{
							all.checked = false;
						}
					}
				}
			}
			//选择全选后，所有选框，都为true，再次点击，全为false
			function aall() {
				var all = document.getElementById("all")
				var ch = document.getElementsByName('lover[]');//获取四个子选项的名称，建立数组
				if (all.checked==true) {
					for (i=0;i<ch.length;i++) {
						ch[i].checked=true;
					}
				}else{
					for (i=0;i<ch.length;i++) {
						ch[i].checked=false;
					}
				}
			}

		</script>

操作视频上传不了，只能大家写好代码，运行观看了