JavaScript实现全选取消效果
作者:XYQS 发布时间:2023-08-27 16:26:42
标签:js,全选取消
本文实例为大家分享了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
0
投稿
猜你喜欢
- 在一些项目中, 我们会使用json 来将字符串转为结构体,但是很多时候,这种结构体只会用一次,基本上只会用于反序列化, 对于这种只用到一次的
- 网站或应用的登录页面有时候通常用户会看很多遍,同时也有机会诱使临时用户注册,所以,一个设计良好的登录页面会比你想象的更有用。这里是一些我们收
- 有一天我突发奇想,要是我每到一个网站,那里都能立刻调出我需要看的信息,那岂非美妙得很。接下来我想更深入地考虑这个问题,坐到椅子上拿一支铅笔,
- 本文实例讲述了Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法。分享给大家
- 最近在处理Qzone黄钻图标更新时,想起近期对业务图标进行优化所遇到的一些问题,把思绪收拾起来和大家一共探讨,欢迎多方声音。在实际工作中,图
- 总的来说视觉设计是一个很大的范畴,囊括了我们身边很多产品的再创作设计,比如工业产品设计,广告设计,新媒体设计,服饰设计,还有我们这里要讨论的
- strftime()函数的用法strftime()函数可以把YYYY-MM-DD HH:MM:SS格式的日期字符串转换成其它形式的字符串。s
- 介绍 IIRF是一款开源的重写URL过滤器,类似于Apache的URL重写,基于VC8.0(可以用Visual Studio200
- [sql] --1.将每个老师的工资更新为原来的工资+奖金 --定义两个变量,用来存储ttid与reward declare @tid in
- 垃圾评论,垃圾留言,人见人憎,用了验证码,效果也好不到哪里去,还影响用户体验。有的网站甚至不惜牺牲用户体验,而构造强悍的惨不忍睹的超级验证码
- 上文:栅格:一以贯之Jacci Howard Bear 的英文原文:http://desktoppub.about.com/od/grids
- 当服务器必须提供与两个或更多个网络或网络子网的连接时,典型的方案是使用多宿主计算机。此计算机通常位于外围网络(也称为 DMZ、外围安全区域或
- 本文是从百度百科中摘录出来的,asp在it中还有Application Service Provider,也就是应用服务供应商的意思。概述A
- 一扯上文化二字,总觉虚无缥缈、漫无边际,或者老气横秋,如何有趣地利用中华文化的思想和符号,结合现代的元素,使其成为有意思的传播手法,这个问题
- 从文本文件中调出记录出现丢失换行?解决方法:<%Dim fsDim tsset fs=Server.Cr
- 与前面一样我们会用fso来对文件或文件夹进行创建与删除操作了,其实fso有强大的功能但非常危险的哦,下面我们不来看看删除实例吧,在这些例子,
- INSERT INTO Table (TestCol) VALUES(‘')其中的TestCol字段,其实在设计的时候,已经被设计为
- 所谓“评论”不是必须得有文本框,用户录入提交数据才算,广义上的评论包括用户的任何“表态”,典型如打分。我接触电子商务时间并不长,最早应该是0
- 在ASP中,直接使用“Insert into” 语句与使用ADO中AddNew方法有什么区别?哪一种更好呢?AddNew方法的实质就是封装了
- 在MySQL中有两种方法1、create table t_name select ...2、create table t_name like