JavaScript实现全选取消效果


Posted in Javascript onDecember 14, 2017

本文实例为大家分享了js实现全选取消效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .hide {
  display: none;
 }

 .c1 {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  opacity: 0.6;
  z-index: 9;
 }

 .c2 {
  width: 500px;
  height: 400px;
  background-color: white;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -300px;
  z-index: 10;
 }
 </style>
</head>
<body style="margin: 0;">
<div>
 <input type="button" value="添加" onclick="ShowModel();"/>
 <input type="button" value="全选" onclick="ChooseAll();"/>
 <input type="button" value="取消" onclick="CancelAll();"/>
 <input type="button" value="反选" onclick="ReverseAll();"/>
 <table>
 <thead>
 <tr>
  <th>选择</th>
  <th>主机名</th>
  <th>端口</th>
 </tr>
 </thead>
 <tbody id="tb">
 <tr>
  <td><input type="checkbox"/></td>
  <td>1.1.1.1</td>
  <td>90</td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>1.1.1.2</td>
  <td>91</td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>1.1.1.3</td>
  <td>92</td>
 </tr>
 </tbody>
 </table>
</div>
<!--遮罩层开始-->
<div id="i1" class="c1 hide"></div>
<!--遮罩层结束-->

<!--弹出框开始-->
<div id="i2" class="c2 hide">
 <p><input type="text"/></p>
 <p><input type="text"/></p>
 <p>
 <input type="button" value="取消" onclick="HideModel();"/>
 <input type="button" value="确定"/>
 </p>
</div>
<!--弹出框结束-->

<script>
 function ShowModel() {
 document.getElementById("i1").classList.remove("hide");
 document.getElementById("i2").classList.remove("hide");
 }
 function HideModel() {
 document.getElementById("i1").classList.add("hide");
 document.getElementById("i2").classList.add("hide");
 }
 function ChooseAll() {
 var tbody = document.getElementById("tb");
 var tb_list = tbody.children;
 for (var i = 0; i < tb_list.length; i++) {
  var current_tr = tb_list[i];
  var checkbox = current_tr.children[0].children[0];
  checkbox.checked = true;
 }
 }
 function CancelAll() {
 var tbody = document.getElementById("tb");
 var tb_list = tbody.children;
 for (var i = 0; i < tb_list.length; i++) {
  var current_tr = tb_list[i];
  var checkbox = current_tr.children[0].children[0];
  checkbox.checked = false;
 }
 }
 function ReverseAll() {
 var tbody = document.getElementById("tb");
 var tb_list = tbody.children;
 for (var i = 0; i < tb_list.length; i++) {
  var current_tr = tb_list[i];
  var checkbox = current_tr.children[0].children[0];
  if(checkbox.checked){
  checkbox.checked = false;
  }else{
  checkbox.checked = true;
  }
 }
 }
</script>
</body>
</html>

效果如下:

JavaScript实现全选取消效果

点击全选反选取消就是相应的效果:

JavaScript实现全选取消效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 #Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 #Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 #Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
原生js实现简单的焦点图效果实例
Dec 14 #Javascript
You might like
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
如何编写python的daemon程序
2021/01/07 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
给女儿的表扬信
2014/01/18 职场文书
置业顾问岗位职责
2014/03/02 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
小学生读书活动总结
2014/06/30 职场文书
大学入学感言
2015/08/01 职场文书
健康教育主题班会
2015/08/14 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
PHP使用QR Code生成二维码实例
2021/07/07 PHP
MYSQL 表的全面总结
2021/11/11 MySQL
Python集合set()使用的方法详解
2022/03/18 Python