zoukankan      html  css  js  c++  java
  • checkbox做全部选中,全部取消效果

    批量选中、取消多个checkbox的用法很简单,这个功能也很常用。这里做个总结。

    在HTML中的写法:

     1 <div id="ftpFileDownTr">
     2     <button onclick="getBatchValues();" value="获取批量选择的值"/>
     3 </div>
     4 <table>
     5         <tr id="ftpFileTitle">
     6             <th>
     7                 <input type="checkbox" onclick="checkAll(this.checked)"/>全部选中/全部取消
     8             </th>
     9             <th>文件名称</th>
    10             <th>文件大小</th>
    11             <th>文件进度</th>
    12             <th>文件状态</th>
    13             <th>操作</th>
    14         </tr>
    15         <tr>
    16             <td>
    17                 <input type="checkbox" name="checkOne" value="a"/>
    18             </td>
    19             <td>文件名a</td>
    20             <td>100M</td>
    21             <td>10%</td>
    22             <td>状态1</td>
    23             <td>操作1</td>
    24         </tr>
    25         <tr>
    26             <td>
    27                 <input type="checkbox" name="checkOne" value="b"/>
    28             </td>
    29             <td>文件名b</td>
    30             <td>100M</td>
    31             <td>10%</td>
    32             <td>状态2</td>
    33             <td>操作2</td>
    34         </tr>
    35         <tr>
    36             <td>
    37                 <input type="checkbox" name="checkOne" value="a"/>
    38             </td>
    39             <td>文件名c</td>
    40             <td>100M</td>
    41             <td>10%</td>
    42             <td>状态3</td>
    43             <td>操作3</td>
    44         </tr>
    45 </table>
    View Code

    checkbox批量选择、批量取消效果的js写法:

    1 function checkAll(checked){//批量选择、批量取消
    2     $('input[name="checkOne"]').attr("checked",checked);
    3 }
    View Code

    获取批量选中的checkbox的值的方法:

     1 function getBatchValues(ctx){
     2     var checkedArr=$("input[name='checkOne']:checked");
     3     if (checkedArr.length == 0){
     4         alert("至少要选择一条数据");
     5         return false;
     6     }
     7     var valueStr="";//值以","为分隔符
     8     for(var i=0;i<checkedArr.length;i++){
     9         if(i==0){
    10             valueStr+=$(checkedArr[i]).val();
    11         }else{
    12             valueStr+=","+$(checkedArr[i]).val();
    13         }
    14     }
    15         alert(valueStr);        
    16 }
    View Code

    就这样。

    在后台java程序中:

    1 private String checkOne;//后台获取到的属性值,是所有name=checkOne的表单值的总和,以","分隔
    2 public void setCheckOne(String checkOne){
    3     this.checkOne=checkOne;
    4 }
    5 public String getCheckOne(){
    6     return checkOne;
    7 }
    View Code
  • 相关阅读:
    禁止MDA对话框的产生 Anny
    how tomcat works(第14章:服务器和服务)
    Python学习笔记2
    how tomcat works(第15章: Digester)
    how tomcat works(第17章: 启动Tomcat)
    how tomcat works(第15章: Digester)
    Python学习笔记2
    how tomcat works(第14章:服务器和服务)
    how tomcat works(第16章: 关闭钩子)
    how tomcat works(第16章: 关闭钩子)
  • 原文地址:https://www.cnblogs.com/mySummer/p/4289963.html
Copyright © 2011-2022 走看看