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

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

 1 <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01//EN "   " http://www.w3.org/TR/html4/strict.dtd " >      
 2 < html >      
 3      < head >      
 4          < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 " >      
 5          < title > Test CheckBox </ title >      
 6          < style type = " text/css " >      
 7             body {      
 8                 font - family:Courier;      
 9             }       
10          </ style >      
11          < script type = " 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 ) {   // checkAll selected      
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 ) {  // checkCancel selected      
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          < input type = " checkbox "  id = " chkAll "  onclick = " checkAll() " />  check All  < br />      
49          < input type = " checkbox "  id = " chkCancel "  onclick = " checkCancel() " />  check Cancel  < br />      
50              < br  />           
51          < div id = " checkBox " >      
52          < input type = " checkbox "  id = " chk1 " />   1   < br />      
53          < input type = " checkbox "  id = " chk2 " />   2   < br />      
54          < input type = " checkbox "  id = " chk3 " />   3   < br />      
55          < input type = " checkbox "  id = " chk4 " />   4   < br />      
56          < input type = " checkbox "  id = " chk5 " />   5   < br />      
57          </ div >      
58      </ body >      
59 </ html >     
60

下图是显示效果