【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 ...
随机推荐
- Linux下Eclipse里用gdb调试JNI里C/C++
1,给Eclipse安装CDT插件 2,先以Debug方式运行java程序,停在java代码的断点上 3,Debug Configuration里选择C/C++ Attach to Applicati ...
- Wide&Deep 模型学习教程
WDL 学习教程 推荐系统+WDL 教学视频: https://www.bilibili.com/video/av29905315/ WDL 模型介绍: https://blog.csdn.net/g ...
- 007-Zabbix Server 自带模板监控MySQL数据库
监控数据库分为三种: 1.Zabbix Server 自带模板监控无密码MySQL数据库 2.Zabbix Server 自带模板监控有密码MySQL数据库 3.Zabbix Server 自带模板监 ...
- Python修炼之路-数据类型
Python编程之列表 列表是一个使用一对中括号"[ ]" 括起来的有序的集合,可以通过索引访问列表元素,也可以增加和删除元素. 列表的索引:第一个元素索引为0,最后一个元素索 ...
- 前端每日实战：157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画（实际上每一行都是平行的）
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 一个IP，一个linux服务器，两个项目，两个域名；如何将两个域名配置到同一个IP的两个项目中。
一.现有资源: 1.阿里云centOS6.5服务器: 2.安装tomcat8.0+JDK: 3.两个不同maven项目的war包,项目名分别为cloud.am: 4.两个域名http://www.lu ...
- 【GDOI2017模拟12.9】最近公共祖先
题目 分析 首先,将这些节点按dfs序建一棵线段树. 因为按dfs序,所以在同一子树上的节点会放在线段树相邻的位置. 发现,对于一个位置x,它的权值只会对以x为根的子树造成影响. 当修改x时,用w[x ...
- 【leetcode】Reach a Number
题目: You are standing at position 0 on an infinite number line. There is a goal at position target. O ...
- php将base64字符串转换为图片
昨天用一个js插件 [链接]: http://www.erdangjiade.com/js/910.html 实行了图片裁剪并预览,不过它生产的图片资源是一个base64字符串,不好保存后来在网上找到 ...
- Codeforces 939E Maximize ( 三分 || 二分 )
题意 : 给出两个操作,① 往一个序列集合(初始为空)里面不降序地添加数字.② 找出当前序列集合的一个子集使得 (子集的最大元素) - (子集的平均数) 最大并且输出这个最大差值 分析 : 首先关注 ...