JavaScript中复选框的全选和反选功能的实现

这是我平时学习时的练习，贴出来跟大家一起讨论，本来是新手，欢迎老手指正错误。

1 <! DOCTYPEHTMLPUBLIC " -//W3C//DTDHTML4.01//EN " " http://www.w3.org/TR/html4/strict.dtd " >
2 < html >
3 < head >
4 < metahttp - equiv = " Content-Type " content = " text/html;charset=utf-8 " >
5 < title > TestCheckBox </ title >
6 < styletype = " text/css " >
7 body {
8 font - family:Courier;
9 }
10 </ style >
11 < scripttype = " text/javascript " >
12 function checkAll() {
13 var checkAll = document.getElementById('chkAll');
14 var checkBox = document.getElementById('checkBox');
15 var arr = new Array();
16 arr = checkBox.getElementsByTagName('input');
17 if (checkAll.checked == true ) { // checkAllselected
18 for (i = 0 ;i < arr.length;i ++ ) {
19 arr[i].checked = true ;
20 }
21 }
22 if (checkAll.checked == false ) {
23 for (i = 0 ;i < arr.length;i ++ ) {
24 arr[i].checked = false ;
25 }
26 }
27
28 }
29 function checkCancel() {
30 var checkCancel = document.getElementById('chkCancel');
31 var checkBox = document.getElementById('checkBox');
32 var arr = new Array();
33 arr = checkBox.getElementsByTagName('input');
34 if (checkCancel.checked == true ) { // checkCancelselected
35 for (i = 0 ;i < arr.length;i ++ ) {
36 if (arr[i].checked == true ) {
37 arr[i].checked = false ;
38 } else {
39 arr[i].checked = true ;
40 }
41 }
42 }
43 }
44 </ script >
45 </ head >
46 < body >
47
48 < inputtype = " checkbox " id = " chkAll " onclick = " checkAll() " /> checkAll < br />
49 < inputtype = " checkbox " id = " chkCancel " onclick = " checkCancel() " /> checkCancel < br />
50 < br />
51 < divid = " checkBox " >
52 < inputtype = " checkbox " id = " chk1 " /> 1 < br />
53 < inputtype = " checkbox " id = " chk2 " /> 2 < br />
54 < inputtype = " checkbox " id = " chk3 " /> 3 < br />
55 < inputtype = " checkbox " id = " chk4 " /> 4 < br />
56 < inputtype = " checkbox " id = " chk5 " /> 5 < br />
57 </ div >
58 </ body >
59 </ html >
60

下图是显示效果