javascript中DOM复选框选择用法实例

这篇文章主要介绍了javascript中DOM复选框选择用法,实例分析了javascript操作复选框实现全选与反选的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript中DOM复选框选择用法。分享给大家供大家参考。具体如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>复选框全选全清和反选</title> 
5. <script type="text/javascript"> 
6. //取得所有的复选框对象数组 
7. function GetAllCheckBox() { 
8. var div = document.getElementById("Balls"); 
9. var inputs = div.getElementsByTagName("input"); 
10. //定义复选框数组，用来返回 
11. var checkboxs = new Array(); 
12. var nIndex = 0; 
13. for (var i = 0; i < inputs.length; i++) { 
14. //通过type是否为checkbox来判断复选框 
15. if (inputs[i].type == "checkbox") { 
16. checkboxs[nIndex] = inputs[i]; 
17. nIndex++; 
18. } 
19. } 
20. return checkboxs; 
21. } 
22. //全选 
23. function selAll() { 
24. var checkboxs = GetAllCheckBox(); 
25. for (var i = 0; i < checkboxs.length; i++) { 
26. checkboxs[i].checked = true; 
27. } 
28. } 
29. //全清 
30. function clearAll() { 
31. var checkboxs = GetAllCheckBox(); 
32. for (var i = 0; i < checkboxs.length; i++) { 
33. checkboxs[i].checked = false; 
34. } 
35. } 
36. //反选 
37. function reverseAll() { 
38. var checkboxs = GetAllCheckBox(); 
39. for (var i = 0; i < checkboxs.length; i++) { 
40. if (checkboxs[i].checked == true) { 
41. checkboxs[i].checked = false; 
42. } 
43. else { 
44. checkboxs[i].checked = true; 
45. } 
46. } 
47. } 
48. </script> 
49. </head> 
50. <body> 
51. <div id="Balls"> 
52. <input type="checkbox" id="c1" /><label for="c1">足球</label> 
53. <input type="checkbox" id="c2" /><label for="c2">台球</label> 
54. <input type="checkbox" id="c3" /><label for="c3">乒乓球</label> 
55. <br /> 
56. <input type="button" value="全选" onclick="selAll()" /> 
57. <input type="button" value="全清" onclick="clearAll()" /> 
58. <input type="button" value="反选" onclick="reverseAll()" /> 
59. </div> 
60. </body> 
61. </html> 

希望本文所述对大家的javascript程序设计有所帮助。