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的一些看法
May 27 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
JS判断数组四种实现方法详解
Jun 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创建Cookie数组的详解
2013/07/03 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
React中如何引入Angular组件详解
2018/08/09 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
python合并文本文件示例
2014/02/07 Python
python远程连接MySQL数据库
2019/04/19 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
一个SQL面试题
2014/08/21 面试题
中职生自荐信范文
2014/06/15 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
员工升职自荐信
2015/03/27 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
活动总结模板大全
2015/05/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python