复选框全选/全部选

zoukankan html css js c++ java

复选框全选/全部选
复选框全选/全部选
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				/*
					全选按钮点击按钮以后，四个多选框全部被选中
				*/
				// 为idcheckedAllBtn的按钮绑定一个单击相应函数
				var item = document.getElementsByName('items');
				
				var checkedAllBtn = document.getElementById('checkedAllBtn');
				checkedAllBtn.onclick = function() {
					//获取四个多选框items
					
					// 遍历items
					for (var i = 0; i < item.length; i++) {
						// 设置四个多选框变成选中状态
						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
						item[i].checked = true;
					}
				}

				// 为checkedNoBtn的按钮绑定一个单击相应函数
				var checkedNoBtn = document.getElementById('checkedNoBtn');
				checkedNoBtn.onclick = function() {
					//获取v
					// 遍历items
					for (var i = 0; i < item.length; i++) {
						// 设置四个多选框变成选中状态
						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
						item[i].checked = false;
					}
				}
				
				// 为checkedRevBtn的按钮绑定一个单击相应函数
				var checkedRevBtn = document.getElementById('checkedRevBtn');
				checkedRevBtn.onclick = function() {
					//获取四个多选框items
					
					// 遍历items
					for (var i = 0; i < item.length; i++) {
						// 设置四个多选框变成选中状态
						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
						item[i].checked = !item[i].checked;
					}
				}
				
				// 为sendBtn的按钮绑定一个单击相应函数
				var sendBtn = document.getElementById('sendBtn');
				sendBtn.onclick = function() {
					//获取四个多选框items
					
					// 遍历items
					console.log(123);
					for (var i = 0; i < item.length; i++) {
						// 设置四个多选框变成选中状态
						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
						if(item[i].checked){
							console.log(item[i].value);
						}
					}
				}
				
				//为checkedAllBox的复选框绑定一个单击相应函数
				var checkedAllBox = document.getElementById('checkedAllBox');
				checkedAllBox.onclick=function(){
					
					for (var i = 0; i < item.length; i++) {
						// 设置四个多选框变成选中状态
						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
						item[i].checked=this.checked;
					}
				}
				//为四个多选框分别绑定点击响应函数
				for (var i = 0; i<item.length;i++){
					item[i].onclick=function(){
						//将checkedAllBox设置为选中状态
						checkedAllBox.checked=true;
						for(var j=0;j<item.length;j++){
							// 判断四个多选框是否是全选
							if(!item[j].checked){
								// 一旦进入判断，则证明不是全选状态
								// 将checkedAllBox设置为没有选中状态
								checkedAllBox.checked=false;
								
								// 一旦进入判断  则已经得出结果  不用再继续执行循环
								break；
							}
						}
						
					}
				}
				
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是什么？<input type="checkbox" id="checkedAllBox" value="" /><label for="checkedAllBox">全选/全不选</label>
			<br />
			<input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label>
			<input type="checkbox" name="items" id="2" value="篮球" /><label for="2">篮球<label>
			<input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label>
			<input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label>
			<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>
</html>
```