【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 ...
随机推荐
- 22_1mybaits入门
1.什么是框架? 它是我们软件开发中的一套解决方案,不同的框架解决的是不同的问题. 使用框架的好处: 框架封装了很多的细节,使开发者可以使用极简的方式实现功能.大大提高开发效率. 2.三层架构 表现层 ...
- SQL代码
SELECT SCHEMA_NAME(SCHEMA_ID)AS ID,name as Table_name FROM sys.tables;--查询表视图 查询表视图
- Angular7和PrimeNg集成
常规操作之后,随便加了一个控件发现报错了.错误信息看起来是不能识别PrimeNg的组件,经过一番折腾发现.因为用到了ngModel,需要导入FormsModule.因为新建的工程没有导入,导入之后就好 ...
- scrapy中的selenium
引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会发现 ...
- HDU-4289-Control(最大流最小割,拆点)
链接: https://vjudge.net/problem/HDU-4289 题意: You, the head of Department of Security, recently receiv ...
- 【NOIP2016提高A组五校联考2】running
题目 小胡同学是个热爱运动的好孩子. 每天晚上,小胡都会去操场上跑步,学校的操场可以看成一个由n个格子排成的一个环形,格子按照顺时针顺序从0 到n- 1 标号. 小胡观察到有m 个同学在跑步,最开始每 ...
- 故障检测、性能调优与Java类加载机制
故障检测.性能调优与Java类加载机制 故障检测.性能调优 用什么工具可以查出内存泄露 (1)MerroyAnalyzer:一个功能丰富的java堆转储文件分析工具,可以帮助你发现内存漏洞和减少内存消 ...
- Leaflet调用geoserver发布的矢量切片
geoserver如何发布切片就不写了,大家都可以查到. index.html <!DOCTYPE html> <html> <head> <meta cha ...
- The GuidRepresentation for the reader is CSharpLegacy, which requires the binary sub type to be Uuid
使用客户端链接MongoDb报错 The GuidRepresentation for the reader is CSharpLegacy, which requires the binary su ...
- 使用 nodejs 和 axios 以及 cherrio 爬取天气预报
安装依赖 引入依赖 发送请求 解析请求的返回值 以下代码可以复制直接运行,获得 7 天的天气预报 const axios = require('axios') const cheerio = requ ...