复选框实现。全选、全不选、多选

复选框实现全选、全不选、被选；

html代码

		<input type="checkbox" id="checksboxs">全选
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">	
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">
		<input type="checkbox" class="checks1">

js代码

<script type="text/javascript">
			var checksboxs = document.getElementById('checksboxs');
			var checks1 = document.getElementsByClassName('checks1');
			// 全选
			checksboxs.onchange = function(){
				for(var i = 0;i<checks1.length;i++){
					checks1[i].checked = this.checked;
				}
			}
			
			var index = 0;// 用来计数
			for(let i = 0;i<checks1.length;i++){
					 每次点击循环一遍所有的元素，存在值为 false（没选中的复选框）就给 checksboxs 赋值false
					 var flag = true;
					 for(let j = 0;j<checks1.length;j++){
					 	if(!checks1[j].checked){
					 		flag = false;
					 		break;
					 	}
					 }
					 checksboxs.checked = flag;
				}
			}
		</script>

按钮实现全选、全不选、多选；

html代码

		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">	
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<input type="checkbox" class="checks">
		<button id="allCheck">全选</button>
		<button id="notCheck">全不选</button>
		<button id="reveCheck">反选</button>

js代码

<script type="text/javascript">
			var allCheck = document.getElementById('allCheck');
			var notCheck = document.getElementById('notCheck');
			var reveCheck = document.getElementById('reveCheck');
			var checks = document.getElementsByClassName('checks');
			// 全选
			allCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = true;
				}
			}
			//全不选
			notCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = false;
				}
			}
			//反选
			reveCheck.onclick = function(){
				for(var i = 0;i<checks.length;i++){
					checks[i].checked = !(checks[i].checked)
				}
			}
		</script>