原生JS實作 全選反選 的效果

主要功能代碼如下

點下面這個超連結去我的github下載下傳這個檔案，打開即可運作

點此下載下傳

var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function(){
	var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');

	var i = 0 ; len = checkboxs.length;
	for( ;i < len ; i++){
		var  checkbox =  checkboxs[i];
		checkbox.checked = this.checked;
	}
	
}

var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
var i = 0 ; len = checkboxs.length;
var n = 0 ;

	for( ;i < len ; i++){
		var  checkbox =  checkboxs[i];
		checkbox.onclick = function(){
			//假設所有子的checked都被選中了
			var isAllChecked = true;
			
			for(i = 0; i<len ; i++){
				checkbox =  checkboxs[i];
				if(checkbox.checked != true){
					isAllChecked = false;
					break;
				}
			}
			
			j_cbAll.checked = isAllChecked;
		}
		
	}	
	
// 反選
var btn = document.getElementById('btn');
btn.onclick = function(){
	var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
	
	var i = 0 ; len = checkboxs.length;
	for( ;i < len ; i++){
		var  checkbox =  checkboxs[i];	
			checkbox.checked = !checkbox.checked;
	}
	
	
	//此處要對父checked進行操作
	// 如果有一個子checked沒被選中,那麼父checked也不被選中,否則都選中
	for(i = 0; i<len ; i++){
		var checkbox =  checkboxs[i];
		if(checkbox.checked != true){
			j_cbAll.checked = false;
			break;
		}else{
			j_cbAll.checked = true;
		}
	}
	
}

           

下面是效果圖，樣式不是重點，不要糾結