js設置複選框的全選和子選的問題解決辦法

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>

操作視頻上傳不了，只能大家寫好代碼，運行觀看了