原生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;
		}
	}
	
}

下面是效果图，样式不是重点，不要纠结