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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
Vue数字输入框组件使用方法详解
Feb 10 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面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python线程创建和终止实例代码
2018/01/20 Python
Django中Forms的使用代码解析
2018/02/10 Python
python学生管理系统代码实现
2020/04/05 Python
如何利用python查找电脑文件
2018/04/27 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
行政副总岗位职责
2014/02/23 职场文书
工伤赔偿协议书
2014/04/15 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python