用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
position: fixed;
top: ;
right: ;
left: ;
bottom: ;
background-color: black;
opacity: 0.5;
z-index: ;
} .c2 {
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: %;
top: %;
margin-left: -250px;
margin-top: -200px;
z-index: ;
} .c3 {
display: none;
} </style>
</head>
<body style="margin: 0 auto"> <div> <input type="button" value="添加" onclick="add()">
<input type="button" value="全选" onclick="ChooseAll()">
<input type="button" value="取消" onclick="CancleAll()">
<input type="button" value="反选" onclick="ReverseAll()">
<table>
<thead>
<tr>
<th>请选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<!--给tbody设置ID用来找到它，然后循环它的孩子-->
<tr>
<td><input type="checkbox"></td>
<td>192.168.99.1</td>
<td></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>192.168.99.2</td>
<td></td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>192.168.99.3</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!-- 遮罩层开始-->
<div id="i1" class="c1 c3"> </div>
<!-- 遮罩层结束--> <!-- 弹出框开始--> <div id="i2" class="c2 c3">
<p>
<input name="ip" type="text">
<input name="duankou" type="text">
</p>
<p>
<input type="button" value="确定" onclick="go()">
<input type="button" value="取消" onclick="goback()">
</p>
</div>
<!-- 弹出框开始--> <script>
function add() {
document.getElementById('i1').classList.remove('c3')
document.getElementById('i2').classList.remove('c3')
} function goback() {
document.getElementById('i1').classList.add('c3')
document.getElementById('i2').classList.add('c3')
} function go() {
var v1 = document.getElementById('i2').valueOf('ip').alert(v1)
} //全选
function ChooseAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
checkbox.checked = true; //checkbox.checked是获取当前CheckBox的值是true还是false
// 当然此时肯定是false，我们只需要让他等于true就可以修改他的当前状态为打上对勾的了
}
} //取消
function CancleAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
checkbox.checked = false; //checkbox.checked是获取当前CheckBox的值是true还是false
// 当然此时肯定是false，我们只需要让他等于false就可以修改他的当前状态为去掉对勾了
} } //反选
function ReverseAll() {
var tbody = document.getElementById('tb')//根据ID找到tbody
var tr_list = tbody.children //获取子标签，并生成列表
for (i = ; i < tr_list.length; i++) { //循环tr_list得到每一个tr
var current_tr = tr_list[i]; //拿到拿到每个td的子标签，也就是里面的所有的tr生成一个列表
var checkbox = current_tr.children[].children[];//得到第一个tr里的第一个子标签也就是CheckBox了
var type = checkbox.checked; //checkbox.checked是获取当前CheckBox的值是true还是false
if (type == true) { //然后对当前状态进行判断 ；如果是true就将他改成false
// 如果是false就将他改成true;即可将他反选
checkbox.checked = false;
}
else {
checkbox.checked = true;
}
}
} </script> </body>
</html>
知识点：
<input type='checkbox'>
checkbox.checked获取当前CheckBox的当前值
document.getElementById()根据ID找到标签
标签.children 找到子标签并生成列表
for (i = 0; i < 标签标签.length; i++) 循环标签列表 得到每一个子标签 效果如下图
用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容的更多相关文章
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- 通过VBA实现checkbox的全选和反选
checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click() ‘checkbox为总控 ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- js实现checkbox的全选/取消
所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- checkbox之全选和反选
先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...
随机推荐
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- UnityVR Steam_VR开发工具插件---VRTK 自带案例分析
- pat1085. Perfect Sequence (25)
1085. Perfect Sequence (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Peng Give ...
- &&运算符和||运算符的优先级问题 专题
public class SyntaxTest { @Test public void test() { System.out.println(true || true && fals ...
- 谷歌地图自定义popup框
谷歌地图的infowindow 不提供官方的定制化 <!DOCTYPE html> <html> <head> <meta name="viewpo ...
- 大数据kafka视频教程 学习记录【B站尚硅谷 】
视频地址: https://www.bilibili.com/video/av35354301/?p=1 2019/03/06 21:59 消息队列的内部实现: Kafka基础: ...
- 使用SpringSession管理分布式系统的会话Session
在我方供应链项目分布式部署的环境下,需要在统一网关服务中管理访问的Session,即无论访问请求路由到哪一个网关服务环境,使用的都是相同的HttpSession,这样就保证了在用户登录之后,能够使用统 ...
- spring batch 读取多个文件数据导入数据库
项目的目录结构 需要读取文件的的数据格式 applicatonContext.xml的配置 <?xml version="1.0" encoding="UTF-8& ...
- JAVA中日期格式转换各个字母代表含义
G Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 Month July; Jul; 07 w 年中的周数 Number 27 W ...
- 关于com工程依赖的一些总结
作者:朱金灿 来源:http://blog.csdn.net/clever101 一是com组件工程的依赖设置.比如A这个组件工程要使用B组件工程的类,要如何设置呢?具体就是先把在A工程里加上B工程的 ...