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

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

[html] view plaincopy
 
  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>  

效果演示

原文地址:https://www.cnblogs.com/buy0769/p/4971260.html