【Html5】表单全选、全不选
以下为页面效果图 用HBuilder做 谷歌浏览器
index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js" ></script>
<script>
function qx(){
//第一步我们要获取所有的复选框
var chk = document.getElementsByName("chk");
//alert(chk.length);
for (var i=0;i<chk.length;i++) {
//赋值
chk[i].checked=true;
}
}
function fx(){
//第一步我们要获取所有的复选框
var chk = document.getElementsByName("chk");
//alert(chk.length);
for (var i=0;i<chk.length;i++) {
//反选 加 非 ！
chk[i].checked=!chk[i].checked;
}
}
function qbx(){
//第一步我们要获取所有的复选框
var chk = document.getElementsByName("chk");
//alert(chk.length);
for (var i=0;i<chk.length;i++) {
//赋值
chk[i].checked=false;
}
} </script>
</head>
<body>
<br /><br /><br /><br /> <table class="table table-striped table-hover table-bordered table-condensed table-responsive">
<thead>
<th>选择</th>
<th>账号</th>
<th>密码</th>
<th>年龄</th>
<th>删除</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr>
<tr>
<td><input type="checkbox" value="0" name="chk"></td>
<td><input type="text" value="" name="account" placeholder="请输入账号" class="form-control"></td>
<td><input type="password" value="" name="password" placeholder="请输入密码" class="form-control"></td>
<td><input type="number" value="" name="age" placeholder="请输入年龄" class="form-control"></td>
<td><button class="btn btn-danger" >删除</button></td>
</tr> </tbody>
<tfoot>
<tr>
<td colspan="5" align="center">
<button class="btn btn-success" onclick="qx()">全选</button>
<button class="btn btn-warning" onclick="fx()">反选</button>
<button class="btn btn-info" onclick="qbx()">全不选</button>
</td>
</tr> </tfoot>
</table>
<br /><br /><br />
<form method="get" style="float: right;">
<!--required必填 maxlength最大长度 min最小值 number只能填数字 autofocus光标自动对焦-->
<input type="text" value="" name="name" required maxlength="6" autofocus placeholder="请输入姓名"/><br /><br />
<input type="password" value="" name="password" required maxlength="12"placeholder="请输入密码"/><br /><br />
<input type="number" value="" name="age" required min="18" placeholder="请输入年龄"/><br /><br />
<input type="submit" value="提交" />
</form> </body>
</html>
index.html
其中 全选和反选的思想就是把复选框的值赋值相反就行
全选：
chk[i].checked=true;
全不选：
chk[i].checked=false;
反选：（这个思想真的很好，就是与之前的相反就行）
chk[i].checked=!chk[i].checked;
<form method="get" style="float: right;">
<!--required必填 maxlength最大长度 min最小值 number只能填数字 autofocus光标自动对焦-->
<input type="text" value="" name="name" required maxlength="6" autofocus placeholder="请输入姓名"/><br /><br />
<input type="password" value="" name="password" required maxlength="12"placeholder="请输入密码"/><br /><br />
<input type="number" value="" name="age" required min="18" placeholder="请输入年龄"/><br /><br />
<input type="submit" value="提交" />
</form>
这段代码就是一个简单的表单验证
比再去单独写一段验证方法要来的简单便捷一些
效果的话可以网页上查看
页面需要引用几个js和css文件
2017-08-31 18:56:39
【Html5】表单全选、全不选的更多相关文章
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- HTML5表单新属性
HTML5表单新属性 autofocus 自动聚焦 <input type="text" autofocus> placeholder占位文本 tel ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- 完善：HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- html5表单验证
表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...
随机推荐
- SpringBootMybatis 关于Mybatis-generator-gui的使用|数据库的编码注意点|各项复制模板
mysql注意点: .有关编码 create table user( id int primary key auto_increment, `name` varchar(), `password` v ...
- 删除表A的记录时，Oracle 报错：“ORA-02292：违反完整约束条件（XXX.FKXXX）- 已找到子记录
1.找到以”FKXXX“为外键的表A的子表,直接运行select a.constraint_name, a.table_name, b.constraint_name from user_constr ...
- python修炼之路---面向对象
面向对象编程 面向对象编程:使用类和对象实现一类功能. 类与对象 类:类就是一个模板,模板里可以包含多个函数,函数里实现一些功能. 对象:是根据模板创建的实例,通过实例对象可以执行类中的函数. 面向对 ...
- webpack4基础配置
网页中常见的静态资源: js: .js .jsx .coffee .ts(TypeScript 类 C# 语言) css: .css .less .sass .scss Images: .jpg .p ...
- apk反编译(仅供娱乐)
第一个文件夹里面放apk,第二个解析classes.dex,第三个查看java代码,下面三个apktool用来解析apk文件, 记得在环境变量中配置apktool,路径为apktool所在路径 1.解 ...
- Raspberry Pi3驱动Oled ssh1106屏
Raspberry Pi3可以直接使用GPIO接口驱动OLED屏 一.接线 根据网上随便找的图可以看到树莓派3的GPIO接口引脚顺序 PS:26pin的GPIO为前26针 根据OLED屏的引脚说明,如 ...
- kafka2.12_1.0.1生产者示范代码
import java.util.Properties;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessag ...
- php大文件分片上传插件
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- C/C++运算符优先级关系
C/C++优先级 从高到低 1~14梯队 1. () [] . -> 2. ! ~ -(负号) ++ -- &(取变量地址)* (type)(强制类型) ...
- 安装SQL2012出现[HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD)设置为 1
本人安装SQL2012出现这个错误,找了三天三夜,终于把问题找出来,共享给有需要的人们,不用重新换系统 错误如下: 1,此问题是系统.net Framework版本冲突,首先下载.net Framew ...