转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选，代码很简单，全部代码如下：

1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>check test</title>
5. </head>
6. <body>
7. <form name="formGroup" id="formGroup" action="#" method="post" target="_self">
8. <table border="1" cellpadding="2" cellspacing="1" class="table_hide">
9. <tr class="table_title">
10. <td width="50" align="center" class="text_center">序号</td>
11. <td width="40" align="center" class="text_center">选择</td>
12. <td width="100" align="center"></td>
13. <td width="100" align="center"></td>
14. </tr>
15. <tr>
16. <td align="center" class="text_center">1</td>
17. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
18. <td align="center"></td>
19. <td align="center"></td>
20. </tr>
21. <tr>
22. <td align="center" class="text_center">2</td>
23. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
24. <td align="center"></td>
25. <td align="center"></td>
26. </tr>
27. <tr>
28. <td align="center" class="text_center">3</td>
29. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
30. <td align="center"></td>
31. <td align="center"></td>
32. </tr>
33. <tr>
34. <td align="center">全选</td>
35. <!-- 复选框单击方式 -->
36. <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>
37. <!-- 按钮方式，本质无区别 -->
38. <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>
39. <td align="center"></td>
40. </tr>
41. </table>
42. </form>
43. </body>
44. <script type="text/javascript">
45. // 选择或者反选 checkbox
46. function CheckSelect(thisform)
47. {
48. // 遍历 form
49. for ( var i = 0; i < thisform.elements.length; i++)
50. {
51. // 提取控件
52. var checkbox = thisform.elements[i];
53. // 检查是否是指定的控件
54. if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
55. {
56. // 正选
57. checkbox.checked = true;
58. }
59. else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
60. {
61. // 反选
62. checkbox.checked = false;
63. }
64. }
65. }
66. </script>
67. </html>

效果演示