js完成全选，反选，全不选_hbuilder js完成布局全选全不选反选提交-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44864468/article/details/109060336

表单简单练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<form action="" method="post">
			你爱好的运动是？ <input type="checkbox"  id="checkedAllBox"  />全选/全不选
			<br>
			<input type="checkbox" name="items"  value="足球" />足球
			<input type="checkbox" name="items"  value="篮球" />篮球
			<input type="checkbox" name="items"  value="羽毛球" />羽毛球
			<input type="checkbox" name="items"  value="乒乓球" />乒乓球
			<br>
			<input type="button"  id="checkedAllBtn" value="全选" />
			<input type="button"  id="checkedNoBtn" value="全不选" />
			<input type="button"  id="checkedRevBtn" value="反选" />
			<input type="button"  id="sendBtn" value="提交" />
		</form>
	</body>
	<script type="text/javascript">
		var cs = 0;
		console.time(cs)
		var checkedAllBtn = document.getElementById('checkedAllBtn');
		var items = document.getElementsByName('items'); 
		// 全选
		checkedAllBtn.onclick = function(){
			// 获取四个多选框
				console.log(items[2])
			 for(let i=0; i<items.length; i++){
				 items[i].checked=true;
			 }
			 checkedAllBox.checked=true;
		} 
		//全不选
		var checkedNoBtn = document.getElementById('checkedNoBtn');
		checkedNoBtn.onclick = function(){
			for(let i=0; i<items.length; i++){
				items[i].checked=false;
			}
			 checkedAllBox.checked=false;
		}
		//反选 未完成
		var checkedRevBtn = document.getElementById('checkedRevBtn');
		checkedRevBtn.onclick = function(){
			checkedAllBox.checked=true
			// 遍历每一个check
			for(let i=0; i<items.length; i++){
				//较复杂
				// if (items[i].checked == true) {
				// 	items[i].checked = false;
				// } else{
				// 	items[i].checked = true;
				// }
				//取反 简化版
				items[i].checked = !items[i].checked;
				
				if(!items[i].checked){
					checkedAllBox.checked=false;
				}
			}
		}
		//全选/全不选
		var checkedAllBox = document.getElementById('checkedAllBox');
		checkedAllBox.onclick = function(){
			for(let i=0; i<items.length; i++){
				// if (checkedAllBox.checked == true) {
				// 	items[i].checked = true;
				// } else{
				// 	items[i].checked = false;
				// }
				items[i].checked = this.checked;
			}
		}
		for(let i=0;i<items.length;i++){
			items[i].onclick = function(){
				checkedAllBox.checked=true
				for(let j=0; j<items.length;j++){
					if(!items[j].checked){
						checkedAllBox.checked=false;
						break;
					}
				}
			}
		}
		console.timeEnd(cs)
	</script>
</html>