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 相关文章推荐
JS中style属性
Oct 11 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
js实现消灭星星(web简易版)
Mar 24 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
详解Python Socket网络编程
2016/01/05 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python新手学习装饰器
2020/06/04 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
护士自我鉴定
2013/10/23 职场文书
学习雷锋倡议书
2014/04/15 职场文书
五一劳动节慰问信
2015/02/14 职场文书
借条如何写
2015/05/26 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js