<!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的全选取消反选，及遮罩层中添加内容的更多相关文章

  1. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  2. jquery中checkbox的全选与反选

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  3. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  4. 通过VBA实现checkbox的全选和反选

    checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click()  ‘checkbox为总控 ...

  5. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  6. js实现checkbox的全选/取消

    所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...

  7. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  8. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  9. checkbox之全选和反选

    先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...

随机推荐

  1. 1、kvm的vnc服务关闭、设置网络模式

    一.kvm的vnc服务关闭 1.关闭虚拟机 virsh shutdown privi-server 2.virsh edit privi-server找到下面内容进行删除 <graphics t ...

  2. OpenStack local.conf

    # Sample ``local.conf`` for user-configurable variables in ``stack.sh`` # NOTE: Copy this file to th ...

  3. (转)linux route命令详解

    linux route命令详解 原文:https://www.cnblogs.com/lpfuture/p/5857738.html   &&   http://blog.csdn.n ...

  4. 工厂模式 jdbc 面向接口dao 开发 单例

    package com.itheima.utils; import java.io.IOException; import java.io.InputStream; import java.util. ...

  5. 机器学习框架ML.NET学习笔记【3】文本特征分析

    一.要解决的问题 问题:常常一些单位或组织召开会议时需要录入会议记录,我们需要通过机器学习对用户输入的文本内容进行自动评判,合格或不合格.(同样的问题还类似垃圾短信检测.工作日志质量分析等.) 处理思 ...

  6. AOP的XML实现方式

    与注解方式类似,只不过所有设置是通过xml来设置 // 切面类 public class Aop { public void around(ProceedingJoinPoint pjp) throw ...

  7. 【问题记录】mysql TIMEDIFF 和 TIMESTAMPDIFF的使用

    今天遇到一个需求,需要计算数据表中两个时间的差值,并取对应的秒数 一开始我是用 time_to_sec(timediff (time1,time2)) 但是这样会有一个问题,,,时间短的用这个计算没有 ...

  8. Windows、Unix、Mac不同操作系统的换行问题-剖析回车符\r和换行符\n

    转载链接:http://blog.csdn.net/tskyfree/article/details/8121951 一.概念: 换行符‘\n’和回车符‘\r’ (1)换行符就是另起一行  --- ' ...

  9. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  10. agc016C - +/- Rectangle(构造 智商题)

    题意 题目链接 Sol 我的思路:直接按样例一的方法构造,若$h \times w$完全被$N \times M$包含显然无解 emm,wa了一发之后发现有反例:1 4 1 3 我的会输出[1 1 - ...