zoukankan      html  css  js  c++  java

  • 转发！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>  

    效果演示
  • 相关阅读:
    js apply的用法
    js 键盘点击事件
    jquery 中 attr 和 prop 的区别
    css实现等高布局 两栏自适应布局 三栏自适应布局
    Python多线程同步命令行模拟进度显示
    Windows上Python3.5安装Scrapy(lxml)
    Ubuntu14.04右键菜单添加Sublime 2打开选项
    Git使用笔记（一）
    C# Winform程序本地化应用
    修改Windows系统的启动Shell
  • 原文地址：https://www.cnblogs.com/buy0769/p/4971260.html
Copyright © 2011-2022 走看看