<!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. DateTime.MinValue和MaxValue引发的异常

    转载: http://www.cnblogs.com/lori/p/3186807.html 问题描述: SqlDateTime 溢出.必须介于 1/1/1753 12:00:00 AM 和 12/3 ...

  2. hutool java工具架包功能介绍

    https://blog.csdn.net/lx1309244704/article/details/76459718

  3. windows用一键安装包安装(推荐)

    为了简化大家在windows下面的安装,我们在xampp基础上做了禅道的windows一键安装包.xampp是业内非常著名的AMP集成运行环境.禅道的一键安装包主要在它基础上做了大量的精简,并集成了我 ...

  4. .net笔试题一（简答题）

    1. 简述 private. protected. public. internal 修饰符的访问权限答:private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类 ...

  5. JVM虚拟机 - 内存

    在JVM虚拟机中,内存部分大致可以分为以下几类: Heap:堆 NonHeap:非堆 CodeCache:缓存编辑后的机器码的内存区域 CompressedClassSpace:类压缩空间 MetaS ...

  6. JAVA爬虫---验证码识别技术（一）

    Python中有专门的图像处理技术比如说PIL,可以对验证码一类的图片进行二值化处理,然后对图片进行分割,进行像素点比较得到图片中的数字.这种方案对验证码的处理相对较少,运用相对普遍,很多验证码图片可 ...

  7. 构建第一个Spring Boot2.0应用之集成mybatis、Druid（七）

    一.环境: IDE:IntelliJ IDEA 2017.1.1 JDK:1.8.0_161 Maven:3.3.9 springboot:2.0.2.RELEASE 二.说明:      本文综合之 ...

  8. Swagger的使用

    参考文章:  https://blog.csdn.net/xupeng874395012/article/details/68946676/ https://blog.csdn.net/hry2015 ...

  9. Android商城开发系列（十四）—— 设置监听RecyclerView的位置

    在前面的博客中有讲到过点击一个图片按钮控制RecyclerView的滚动到顶部位置的效果,但是那个图片按钮一直处在一个显示的状态,今天我们来改造一下那个地方,我们要实现的效果是:一开始打开的时候看不到 ...

  10. C#环形缓冲区（队列）完全实现

    公司项目中经常设计到串口通信,TCP通信,而且大多都是实时的大数据的传输,然后大家都知道协议通讯肯定涉及到什么,封包.拆包.粘包.校验--什么鬼的概念一大堆,说简单点儿就是要一个高效率可复用的缓存区. ...