zoukankan      html  css  js  c++  java
  • 【Html5】表单全选、全不选

    以下为页面效果图   用HBuilder做  谷歌浏览器

    index.html代码

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8" />
      5         <title></title>
      6         <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
      7         <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
      8         <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
      9         <script>
     10             function qx(){
     11                 //第一步我们要获取所有的复选框
     12                 var chk = document.getElementsByName("chk");
     13                 //alert(chk.length);
     14                 for (var i=0;i<chk.length;i++) {
     15                     //赋值
     16                     chk[i].checked=true;
     17                 }
     18             }
     19             function fx(){
     20                 //第一步我们要获取所有的复选框
     21                 var chk = document.getElementsByName("chk");
     22                 //alert(chk.length);
     23                 for (var i=0;i<chk.length;i++) {
     24                     //反选   加 非 !
     25                     chk[i].checked=!chk[i].checked;
     26                 }
     27             }
     28             function qbx(){
     29                 //第一步我们要获取所有的复选框
     30                 var chk = document.getElementsByName("chk");
     31                 //alert(chk.length);
     32                 for (var i=0;i<chk.length;i++) {
     33                     //赋值
     34                     chk[i].checked=false;
     35                 }
     36             }
     37             
     38         </script>
     39     </head>
     40     <body>
     41         <br /><br /><br /><br />
     42         
     43         <table class="table table-striped table-hover table-bordered table-condensed table-responsive">
     44             <thead>
     45                 <th>选择</th>
     46                 <th>账号</th>
     47                 <th>密码</th>
     48                 <th>年龄</th>
     49                 <th>删除</th>
     50             </thead>
     51             <tbody>
     52                 <tr>
     53                     <td><input type="checkbox" value="0" name="chk"></td>
     54                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     55                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     56                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     57                     <td><button class="btn btn-danger" >删除</button></td>
     58                 </tr>
     59                 <tr>
     60                     <td><input type="checkbox" value="0" name="chk"></td>
     61                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     62                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     63                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     64                     <td><button class="btn btn-danger" >删除</button></td>
     65                 </tr>
     66                 <tr>
     67                     <td><input type="checkbox" value="0" name="chk"></td>
     68                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     69                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     70                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     71                     <td><button class="btn btn-danger" >删除</button></td>
     72                 </tr>
     73                 <tr>
     74                     <td><input type="checkbox" value="0" name="chk"></td>
     75                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     76                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     77                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     78                     <td><button class="btn btn-danger" >删除</button></td>
     79                 </tr>
     80                 <tr>
     81                     <td><input type="checkbox" value="0" name="chk"></td>
     82                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     83                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     84                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     85                     <td><button class="btn btn-danger" >删除</button></td>
     86                 </tr>
     87                 <tr>
     88                     <td><input type="checkbox" value="0" name="chk"></td>
     89                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     90                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     91                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     92                     <td><button class="btn btn-danger" >删除</button></td>
     93                 </tr>
     94                 <tr>
     95                     <td><input type="checkbox" value="0" name="chk"></td>
     96                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
     97                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
     98                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
     99                     <td><button class="btn btn-danger" >删除</button></td>
    100                 </tr>
    101                 <tr>
    102                     <td><input type="checkbox" value="0" name="chk"></td>
    103                     <td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
    104                     <td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
    105                     <td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
    106                     <td><button class="btn btn-danger" >删除</button></td>
    107                 </tr>
    108                 
    109                 
    110                 
    111             </tbody>
    112             <tfoot>
    113                 <tr>
    114                     <td colspan="5" align="center">
    115                         <button class="btn btn-success" onclick="qx()">全选</button>&nbsp;&nbsp;&nbsp;
    116                         <button class="btn btn-warning" onclick="fx()">反选</button>&nbsp;&nbsp;&nbsp;
    117                         <button class="btn btn-info" onclick="qbx()">全不选</button>
    118                     </td>
    119                 </tr>
    120                 
    121                 
    122             </tfoot>
    123         </table>
    124         <br /><br /><br />
    125         <form method="get" style="float: right;">
    126             <!--required必填             maxlength最大长度           min最小值           number只能填数字        autofocus光标自动对焦-->
    127             <input type="text" value="" name="name" required maxlength="6" autofocus placeholder="请输入姓名"/><br /><br />
    128             <input type="password" value="" name="password" required maxlength="12"placeholder="请输入密码"/><br /><br />
    129             <input type="number" value="" name="age" required min="18"  placeholder="请输入年龄"/><br /><br />
    130             <input type="submit" value="提交" />
    131         </form>
    132         
    133     </body>
    134 </html>
    index.html

    其中   全选和反选的思想就是把复选框的值赋值相反就行

    全选:

    chk[i].checked=true;

    全不选:

    chk[i].checked=false;

    反选:(这个思想真的很好,就是与之前的相反就行)

    chk[i].checked=!chk[i].checked;

    1 <form method="get" style="float: right;">
    2             <!--required必填             maxlength最大长度           min最小值           number只能填数字        autofocus光标自动对焦-->
    3             <input type="text" value="" name="name" required maxlength="6" autofocus placeholder="请输入姓名"/><br /><br />
    4             <input type="password" value="" name="password" required maxlength="12"placeholder="请输入密码"/><br /><br />
    5             <input type="number" value="" name="age" required min="18"  placeholder="请输入年龄"/><br /><br />
    6             <input type="submit" value="提交" />
    7         </form>

    这段代码就是一个简单的表单验证

    比再去单独写一段验证方法要来的简单便捷一些

    效果的话可以网页上查看

    页面需要引用几个js和css文件

    这个是下载链接

    2017-08-31  18:56:39

  • 相关阅读:
    A Simple Problem with Integers poj 3468 多树状数组解决区间修改问题。
    Fliptile 开关问题 poj 3279
    Face The Right Way 一道不错的尺取法和标记法题目。 poj 3276
    Aggressive cows 二分不仅仅是查找
    Cable master(二分题 注意精度)
    B. Pasha and String
    Intervals poj 1201 差分约束系统
    UITextField的快速基本使用代码块
    将UIImage转换成圆形图片image
    color转成image对象
  • 原文地址:https://www.cnblogs.com/angelye/p/7459993.html
Copyright © 2011-2022 走看看