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 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
微信小程序实现录音功能
Nov 22 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
javascript实现拼图游戏
Jan 29 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django密码系统实现过程详解
2019/07/19 Python
keras的三种模型实现与区别说明
2020/07/03 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
租房协议书范文
2014/08/20 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
学生党员检讨书范文
2014/12/27 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js