JavaScript实现全选取消效果
作者：XYQS 时间：2023-08-27 16:26:42
本文实例为大家分享了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>
效果如下：
点击全选反选取消就是相应的效果：
来源：http://blog.csdn.net/qq_41144008/article/details/78795265
标签：js,全选取消
0
投稿猜你喜欢
python中逻辑与或（and、or）和按位与或异或（&、|、^）区别
2023-07-05 23:02:34
MySQL命令行中给表添加一个字段（字段名、是否为空、默认值）
2024-01-16 12:47:36
python交互式图形编程实例（三）
2021-10-10 17:34:39
简单介绍Python中利用生成器实现的并发编程
2022-04-29 00:56:12
GO CountMinSketch计数器(布隆过滤器思想的近似计数器)
2024-02-17 06:12:40
ASP.NET MVC从控制器中获取URL值
2023-07-09 18:30:08
Python ftp上传文件
2023-10-01 06:35:34
Mysql数据库名和表名的大小写敏感性问题
2010-06-07 14:07:00
微信小程序开发常用功能汇总
2024-02-27 05:23:56
最新MySQL高级SQL语句大全
2024-01-24 22:58:00
基于java线程池读取单个SQL数据库表
2024-01-25 08:17:00
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2021-04-26 18:19:14
Django 反向生成url实例详解
2022-07-21 23:51:05
PostgreSQL COALESCE使用方法代码解析
2024-01-28 19:55:01
python 重定向获取真实url的方法
2022-10-25 03:24:46
SQL LOADER错误小结
2024-01-20 23:26:36
无惧面试,带你搞懂python 装饰器
2022-07-29 19:29:00
PHP文件运行步骤以及数据库的连接代码
2023-05-25 08:32:51
Python基于csv模块实现读取与写入csv数据的方法
2023-04-12 23:14:34
将python图片转为二进制文本的实例
2021-04-23 17:21:45
