<!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. 基于Python Selenium Unittest PO设计模式详解

    本文章会讲述以下几个内容: 1.什么是PO设计模式(Page Object Model) 2.为什么要使用PO设计模式 3.使用PO设计模式要点 4.PO设计模式实例 1.什么是PO设计模式 (Pag ...

  2. Spark (Python版) 零基础学习笔记（二）—— Spark Transformations总结及举例

    1. map(func) 将func函数作用到数据集的每个元素,生成一个新的分布式的数据集并返回 >>> a = sc.parallelize(('a', 'b', 'c')) &g ...

  3. 使用open live writer客户端写博客(亲测有效)

    博客都开了这么久了,才开始将资料上传,但是每次都要登录网页确实很麻烦,所以就用open live writer,使用起来真的是挺方便的,所以将我在安装配置时,发现的问题汇总起来以便日后再次碰到忘记怎么 ...

  4. 备份当前的ubuntu系统生成iso

    使用respin,步骤如下: sudo add-apt-repository ppa:sergiomejia666/respin sudo apt-get update sudo apt-get in ...

  5. 三，JVM 自带命令行工具之JMap

    jmap:java内存映像工具 jmap(Memory Map for java ) 命令用于生成堆转储快照(一般被称为headdump 或dump文件) jmap命令格式:jmap [option ...

  6. Angular8稳定版修改概述

    在今天早些时候Angular团队发布了8.0.0稳定版.其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能.下面是我对8.0.0一些新功能的简单介 ...

  7. Invoke PowerShell by UiPath

    UiPath能够调用PowerShell ,最近在项目中得到了实践:  需求: 某系统生成的日志文件的名字,时间戳只到分,形如bz20180214_1655.log    这样在如果在1分钟内生成多个 ...

  8. JSTL，JQuery，Ajax，Json

    JSTL 的定义  1  JSP 标准标签库 (JavaServerPage Standard Tag Library) 2  JSTL 通常会与EL 表达式合作实现JSP页面的编码   JSTL 的 ...

  9. 做一个vue模态弹出框如何

    运用的知识点包括: 路由的配置 插槽 vue的过渡动画 路由重定向 router/index.js里面配置路由 import Vue from 'vue' import Router from 'vu ...

  10. css3动画-加载中...

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...