释放双眼，带上耳机，听听看~！
这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。
checkbox的使用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
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>DHTML技术演示---checkbox的使用1</title>
5 <script type="text/javascript">
6 //html中<pre></pre>让代码原样输出-小提示
7 function getSum(){
8 var sum=0;
9 var arrChkNode = document.getElementsByName("item");
10 for(var x=0;x<arrChkNode.length;x++){
11 if(arrChkNode[x].checked){
12 sum+=parseInt(arrChkNode[x].value);
13 }
14 }
15 var sVal = sum+"元";
16 //字体颜色设置为红色
17 //document.getElementById("sumid").innerHTML="<font color='red'>aaa</font>";
18 document.getElementById("sumid").innerHTML=sVal.fontcolor("red");
19
20 }
21
22 function checkAll(aChkAllNode){
23 var arrChkNodes = document.getElementsByName("item");
24 for(var x=0;x<arrChkNodes.length;x++){
25 //arrChkNodes[x].checked=true;//"true"也可以，但不建议这样使用，因为API中要求的是boolean类型
26 arrChkNodes[x].checked= aChkAllNode.checked;
27 }
28 }
29 </script>
30
31 </head>
32
33 <body>
34 <input type="checkbox" name="item" value="8000"/>空调:8000元<br/>
35 <input type="checkbox" name="item" value="160"/>风扇:160元<br/>
36 <input type="checkbox" name="item" value="4500"/>电脑:4500元<br/>
37 <input type="checkbox" name="item" value="5000"/>投影仪:5000元<br/>
38 <input type="checkbox" onclick="checkAll(this)"/>全选<br/>
39 <input type="button" value="总金额是：" onclick="getSum()"><span id="sumid"> </span>
40 </body>
41</html>
42
43
360浏览器8.1 演示结果:
checkbox的使用2：
仿邮件选择的方式做多选框
table.css:
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
2 border:#ff80ff 1px solid;
3 /*solid : 实线边框 */
4 width:800px;
5 border-collapse:collapse;
6 /*separate : 默认值。边框独立（标准HTML）
7 collapse : 相邻边被合并
8 */
9}
10table td{/*table 下面的td*/
11 border:#0000ff 1px solid;
12 padding:5px;/*内补丁*/
13}
14table th{
15 border:#ff80ff 1px solid;
16 padding:5px;
17 background-color:#c0c0c0;
18}
19.one{
20 background-color:#80ff00;
21}
22.two{
23 background-color:#ff80ff;
24}
25.over{
26 background-color:#ffff00;
27}
28
29
第一种方式：
代码：
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
155
156
157
158
159
160
161
162
163
164
165
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>DHTML技术演示---checkbox的使用2</title>
5 <style type="text/css">
6 @import url(table.css);
7 </style>
8
9 <script type="text/javascript">
10 var name;
11 function trColor(){
12 var oTableNode = document.getElementById("mailTable");
13 var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
14 for(var x=1; x<collTrNodes.length;x++ ){
15 if(x%2==1){
16 collTrNodes[x].className="one";
17 }else{
18 collTrNodes[x].className="two";
19 }
20 collTrNodes[x].onmouseover=function(){
21 name=this.className;
22 this.className="over";
23 /*下面这种注册事件的方式也可以
24 this.onmouseout=function(){
25 this.className=name;
26 }
27 */
28 }
29 collTrNodes[x].onmouseout=function(){
30 this.className=name;
31 }
32 }
33 }
34 onload = function(){
35 trColor();
36 }
37
38 function checkAll(aChkboxNode){
39 var collChkboxAllNodes = document.getElementsByName("all");
40 //取消部分选中时的显示样式
41 collChkboxAllNodes[0].indeterminate=false;
42 collChkboxAllNodes[1].indeterminate=false;
43
44 var collMailNodes = document.getElementsByName("mail");
45 for(var x=0;x<collMailNodes.length;x++){
46 collMailNodes[x].checked = aChkboxNode.checked;
47 }
48 collChkboxAllNodes[0].checked = aChkboxNode.checked;
49 collChkboxAllNodes[1].checked = aChkboxNode.checked;
50 }
51
52 function checkAllByBtn1(flag){
53 var collMailNodes = document.getElementsByName("mail");
54 for(var x=0;x<collMailNodes.length;x++){
55 collMailNodes[x].checked = flag;
56 }
57 var collChkboxAllNodes = document.getElementsByName("all");
58 collChkboxAllNodes[0].checked = flag;
59 collChkboxAllNodes[1].checked = flag;
60 //取消部分选中时的显示样式
61 collChkboxAllNodes[0].indeterminate=false;
62 collChkboxAllNodes[1].indeterminate=false;
63 }
64
65 function checkAllByBtn2(){
66 var collMailNodes = document.getElementsByName("mail");
67 var n=0;
68 for(var x=0;x<collMailNodes.length;x++ ){
69 collMailNodes[x].checked = !collMailNodes[x].checked;
70 if( collMailNodes[x].checked ){
71 n++;
72 }
73 }
74 var collChkboxAllNodes = document.getElementsByName("all");
75 collChkboxAllNodes[0].indeterminate=false;
76 collChkboxAllNodes[1].indeterminate=false;
77 if(n==0){
78 collChkboxAllNodes[0].checked = false;
79 collChkboxAllNodes[1].checked = false;
80 }else if(n==collMailNodes.length){
81 collChkboxAllNodes[0].checked = true;
82 collChkboxAllNodes[1].checked = true;
83 }else{//部分选中时的显示样式
84 collChkboxAllNodes[0].indeterminate=true;
85 collChkboxAllNodes[1].indeterminate=true;
86 }
87 }
88
89 function deleteMail(){
90 if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
91 return;
92 }
93
94 //获取所有的邮件
95 var collMailChkNodes = document.getElementsByName("mail");
96 for(var x=0;x<collMailChkNodes.length;x++){
97 if (collMailChkNodes[x].checked) {//选中，则删除
98 //先拿到tr对象
99 var oTrNode = collMailChkNodes[x].parentNode.parentNode;
100 oTrNode.parentNode.removeChild(oTrNode);
101 //bug:节点容器中，remove之后，长度会变。
102 x--;//长度修正--还有一种解决方案是：从后往前删
103 }
104 }
105 trColor();
106 }
107
108
109 </script>
110
111
112 </head>
113
114 <body>
115 <h2>邮件列表</h2>
116 <table id="mailTable">
117 <tr>
118 <th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
119
120 <th>发件人</th> <th>邮件标题</th> <th>时间</th>
121 </tr>
122 <tr>
123 <td><input type="checkbox" name="mail" /></td>
124 <td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
125 </tr>
126 <tr>
127 <td><input type="checkbox" name="mail" /></td>
128 <td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
129 </tr>
130 <tr>
131 <td><input type="checkbox" name="mail" /></td>
132 <td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
133 </tr>
134 <tr>
135 <td><input type="checkbox" name="mail" /></td>
136 <td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
137 </tr>
138 <tr>
139 <td><input type="checkbox" name="mail" /></td>
140 <td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
141 </tr>
142 <tr>
143 <td><input type="checkbox" name="mail" /></td>
144 <td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
145 </tr>
146 <tr>
147 <td><input type="checkbox" name="all" onClick="checkAll(this)"/>全选</td>
148
149 <td colspan="3">
150 <!--colspan=3-表示这一列占3列 -->
151 <input type="button" value="全选" onclick="checkAllByBtn1(true)">
152 <input type="button" value="取消全选" onclick="checkAllByBtn1(false)">
153 <input type="button" value="反选" onclick="checkAllByBtn2()">
154
155 <input type="button" value="删除所选邮件" onClick="deleteMail()">
156 </td>
157 </tr>
158
159
160 </table>
161
162 </body>
163</html>
164
165
第二中方式：把2个方法合并为一个方法：
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
155
156
157
158
159
160
161
162
163
164
165
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>DHTML技术演示---checkbox的使用2</title>
5 <style type="text/css">
6 @import url(table.css);
7 </style>
8
9 <script type="text/javascript">
10 var name;
11 function trColor(){
12 var oTableNode = document.getElementById("mailTable");
13 var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
14 for(var x=1; x<collTrNodes.length;x++ ){
15 if(x%2==1){
16 collTrNodes[x].className="one";
17 }else{
18 collTrNodes[x].className="two";
19 }
20 collTrNodes[x].onmouseover=function(){
21 name=this.className;
22 this.className="over";
23 /*下面这种注册事件的方式也可以
24 this.onmouseout=function(){
25 this.className=name;
26 }
27 */
28 }
29 collTrNodes[x].onmouseout=function(){
30 this.className=name;
31 }
32 }
33 }
34 onload = function(){
35 trColor();
36 }
37
38 function checkAll(aChkboxNode){
39 var collChkboxAllNodes = document.getElementsByName("all");
40 //取消部分选中时的显示样式
41 collChkboxAllNodes[0].indeterminate=false;
42 collChkboxAllNodes[1].indeterminate=false;
43
44 var collMailNodes = document.getElementsByName("mail");
45 for(var x=0;x<collMailNodes.length;x++){
46 collMailNodes[x].checked = aChkboxNode.checked;
47 }
48 collChkboxAllNodes[0].checked = aChkboxNode.checked;
49 collChkboxAllNodes[1].checked = aChkboxNode.checked;
50 }
51
52 //合并的方法：
53 function checkAllByBtn(num){
54 //获得邮件的所有多选框对象
55 var collMailNodes = document.getElementsByName("mail");
56
57 var collChkboxAllNodes = document.getElementsByName("all");//获得那2个全选的多选框
58 //取消部分选中时的显示样式
59 collChkboxAllNodes[0].indeterminate=false;
60 collChkboxAllNodes[1].indeterminate=false;
61
62 var n=0;
63 //遍历所有的邮件多选框
64 for(var x=0;x<collMailNodes.length;x++){
65 if(num>1){//反选
66 collMailNodes[x].checked = !collMailNodes[x].checked;
67 }else{
68 collMailNodes[x].checked = num;
69 }
70 if(collMailNodes[x].checked){
71 n++;
72 }
73 }
74
75 if(n==0){
76 collChkboxAllNodes[0].checked = false;
77 collChkboxAllNodes[1].checked = false;
78 }else if(n==collMailNodes.length){
79 collChkboxAllNodes[0].checked = true;
80 collChkboxAllNodes[1].checked = true;
81 }else{//部分选中时的显示样式
82 collChkboxAllNodes[0].indeterminate=true;
83 collChkboxAllNodes[1].indeterminate=true;
84 }
85
86 }
87
88
89
90 function deleteMail(){
91 if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
92 return;
93 }
94
95 //获取所有的邮件
96 var collMailChkNodes = document.getElementsByName("mail");
97 for(var x=0;x<collMailChkNodes.length;x++){
98 if (collMailChkNodes[x].checked) {//选中，则删除
99 //先拿到tr对象
100 var oTrNode = collMailChkNodes[x].parentNode.parentNode;
101 oTrNode.parentNode.removeChild(oTrNode);
102 //bug:节点容器中，remove之后，长度会变。
103 x--;//长度修正--还有一种解决方案是：从后往前删
104 }
105 }
106 trColor();
107 }
108
109
110 </script>
111
112
113 </head>
114
115 <body>
116 <h2>邮件列表</h2>
117 <table id="mailTable">
118 <tr>
119 <th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
120
121 <th>发件人</th> <th>邮件标题</th> <th>时间</th>
122 </tr>
123 <tr>
124 <td><input type="checkbox" name="mail" /></td>
125 <td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
126 </tr>
127 <tr>
128 <td><input type="checkbox" name="mail" /></td>
129 <td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
130 </tr>
131 <tr>
132 <td><input type="checkbox" name="mail" /></td>
133 <td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
134 </tr>
135 <tr>
136 <td><input type="checkbox" name="mail" /></td>
137 <td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
138 </tr>
139 <tr>
140 <td><input type="checkbox" name="mail" /></td>
141 <td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
142 </tr>
143 <tr>
144 <td><input type="checkbox" name="mail" /></td>
145 <td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
146 </tr>
147 <tr>
148 <td><input type="checkbox" name="all" onClick="checkAll(this)"/>全选</td>
149
150 <td colspan="3">
151 <!--colspan=3-表示这一列占3列 -->
152 <input type="button" value="全选" onClick="checkAllByBtn(1)">
153 <input type="button" value="取消全选" onClick="checkAllByBtn(0)">
154 <input type="button" value="反选" onClick="checkAllByBtn(2)">
155 <input type="button" value="删除所选邮件" onClick="deleteMail()">
156 </td>
157 </tr>
158
159
160 </table>
161
162 </body>
163</html>
164
165
360浏览器8.1演示结果：
