【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 ...
随机推荐
- 爬虫获取网页数据，报错：UnicodeDecodeError: 'utf-8' codec can't decode byte 0x8b in position 1: invalid start by
https://blog.csdn.net/hj_xy_0705/article/details/85011072
- usermod 修改用户信息
7.2 usermod 修改用户信息 1.命令功能 usermod 修改已存在的用户账号信息. 2.语法格式 usermod option login 参数选项说明 选项 选项说明 -c 修改用户pa ...
- Ubuntu打开中文输入法
方法/步骤: 1.从system settings 进入language support 在keyboard input method system 中选择 ibus (这里以ibus为例) 然后cl ...
- SpringBoot之持久化框架
在之前的 Spring学习之旅(十二)--持久化框架 中我们介绍了 JPA 的使用,今天我们就来了解下另一种持久化框架 Mybatis. 一.集成 Mybatis 1.1 准备工作 新建用户表 CRE ...
- Python Web 服务开发者: 第 1 部分
Python Web 服务开发者: 第 1 部分 Python Web 服务世界 Python 的座右铭一向是“装备齐全”,这是指在安装该语言时会附带一大套标准库和功能程序.本文概述了在 Python ...
- python类库26[sqlite]
一 sqlite 与 python 的类型对应 二 实例 import sqlite3 def sqlite_basic(): # Connect to db conn = sqlit ...
- 理解 es7 async/await
简介 JavaScript ES7 中的 async / await 让多个异步 promise 协同工作起来更容易.如果要按一定顺序从多个数据库或者 API 异步获取数据,你可能会以一堆乱七八糟的 ...
- excel中汉字转拼音
Excel中文转拼音(完整版)打开Excel->工具->宏->Viaual Basic编辑器在弹出来的窗口中对着VBAproject点右键->插入->模块下面会出现一个名 ...
- J2EE知识总结——面试、笔试
9.2 jdk 1.8的新特性(核心是Lambda 表达式) 参考链接:http://www.bubuko.com/infodetail-690646.html (1)接口的默认方法 (给接口添加一个 ...
- c# 谷歌动态口令对接
https://www.cnblogs.com/easyauthor/p/11054869.html Google 身份验证器与两步验证功能配合,可在您登录 Google 帐户时为您平添一重安全保障. ...