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

时间：2021-08-17 13:24:03

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>

效果演示

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

相关文章