16_JavaScript_DOM编程_实验之Checkbox全选

Posted on In Views:

本文主要学习如何对复选框进行操作……

一个练习：

关于对复选框的操作：

ex-7.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框操作</title>
<script type="text/javascript">
	window.onload = function() {
		//获取四个复选框的节点
		var itemsNode = document.getElementsByName("items");
		//alert(itemsNode.length);//返回4
		//获取全选/全不选的节点
		var checkedAll_2 = document.getElementById("checkedAll_2");
		//alert(checkedAll_2);//返回元素节点
		//alert(checkedAll_2.checked);//false
		
		//进入之后首先判断全选和复选框是否全部对应
		//checkedAll_2.checked = true;//测试
		if(checkedAll_2.checked){
			allChecked(itemsNode, checkedAll_2);
		}else{
			allNoChecked(itemsNode, checkedAll_2);
		}
		
		//当改变checkedAll_2时改变复选框的值
		checkedAll_2.onchange = function(){
			//alert("改变了");
			if(checkedAll_2.checked){
				allChecked(itemsNode, checkedAll_2);
			}else{
				allNoChecked(itemsNode, checkedAll_2);
			}
		}
		
		//当改变某一个复选框的值时判断整体是否符合全选或者全不选条件
		for(var i=0; i<itemsNode.length; i++){
			itemsNode[i].onchange = function(){
				if(this.checked){//如果选中了当前项，判断是否全选
					//如果四个中有一个没有被选中截止添加t的值
					for(var t=0; t<itemsNode.length; t++){
						if(!itemsNode[t].checked){
							break;
						}
					}
					//如果t值累计到4说明全部选取，将全选打勾
					if(t == itemsNode.length){
						checkedAll_2.checked = true;
					}
				}else{//否者说明该项不打勾，此时判断是否没有全选
					//判断全选如果有打勾需要去掉
					if(checkedAll_2.checked){
						checkedAll_2.checked = false;
					}
				}
			}
		}
		
		//接下来为各个按键添加事件
		//全选按钮
		var allCheckedButton = document.getElementById("CheckedAll");
		allCheckedButton.onclick = function(){
			allChecked(itemsNode, checkedAll_2);
		}
		
		//全不选按钮
		var allNoCheckedButton = document.getElementById("CheckedNo");
		allNoCheckedButton.onclick = function(){
			allNoChecked(itemsNode, checkedAll_2);
		}
		
		//反选按钮：
		var otherCheckedButton = document.getElementById("CheckedRev");
		otherCheckedButton.onclick = function(){
			for(var i=0; i<itemsNode.length; i++){
				if(itemsNode[i].checked){
					itemsNode[i].checked = false;
				}else{
					itemsNode[i].checked = true;
				}
				//添加一个全选或者不全选的操作
				operateAllChecked(itemsNode, checkedAll_2);
			}
		}
		
		//测试读出复选框的值
		//alert(itemsNode[0].value);
		
		//提交按钮：
		var submitButton = document.getElementById("send");
		submitButton.onclick = function(){
			//设置变量text用来载值
			var text = "";
			//遍历出选中的值
			for(var i=0; i<itemsNode.length; i++){
				if(itemsNode[i].checked){
					if(text==""){
						text = itemsNode[i].value;
					}else{
						text = text + "+" + itemsNode[i].value;
					}
				}
			}
			alert(text);
		}
		
		//判断程序是否执行完
		alert("end");
	}
	
	function operateAllChecked(itemsNode, checkedAll_2){
		for(var t=0; t<itemsNode.length; t++){
			if(!itemsNode[t].checked){
				break;
			}
		}
		//如果t值累计到4说明全部选取，将全选打勾
		if(t == itemsNode.length){
			checkedAll_2.checked = true;
		}else{
			checkedAll_2.checked = false;
		}
	}
	
	function allChecked(itemsNode, checkedAll_2){
		for(var i=0; i<itemsNode.length; i++){
			itemsNode[i].checked = true;
		}
		checkedAll_2.checked = true;
	}
	
	function allNoChecked(itemsNode, checkedAll_2){
		for(var i=0; i<itemsNode.length; i++){
			itemsNode[i].checked = false;
		}
		checkedAll_2.checked = false;
	}
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 <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="CheckedAll" value="全　选" /> 
		<input type="button" id="CheckedNo" value="全不选" /> 
		<input type="button" id="CheckedRev" value="反　选" /> 
		<input type="button" id="send" value="提　交" />
	</form>

</body>
</html>