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 相关文章推荐
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
js自定义回调函数
Dec 13 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php上传文件问题汇总
2015/01/30 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
使用python实现链表操作
2018/01/26 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python里运用私有属性和方法总结
2019/07/08 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
用python批量移动文件
2021/01/14 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
个人委托书怎么写
2014/04/04 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
人大调研汇报材料
2014/08/14 职场文书
个人租房协议书范本
2014/09/30 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技