以下为页面效果图 用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> 116 <button class="btn btn-warning" onclick="fx()">反选</button> 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>
其中 全选和反选的思想就是把复选框的值赋值相反就行
全选：
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