<!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. UVa11093

    //当汽车从第i个加油站到第j个加油站无法继续走下去的时候,这时候[i,j]区间的所有加油站都无法作为起点,因为当我们到第k个加油站的时候,起码是带着>=0的油去的,现在不带油直接从第k个开始肯 ...

  2. java日期与时间戳相互转换大全

    转载大神 https://blog.csdn.net/djc777/article/details/50904989/

  3. java insert mysql 中文乱码

    jdbc:mysql://192.168.1.77:3306/db360?useUnicode=true&characterEncoding=UTF-8 drop database if ex ...

  4. A -- A. Quailty and Playing Cards 模拟 + 思考

    http://www.ifrog.cc/acm/problem/1036?contest=1005&no=0 分类,考虑Q神出的是第一张或者是第二张,然后对手出那些牌来应付. Q神出第一张和第 ...

  5. Linux Shell命令系列(1)

    1. ls命令ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹.“ls -l”命令以详情模式(long listi ...

  6. WCF 内置绑定在不同的传输安全模式下的信道层

    basicHttpBinding Transport安全模式信道层 Message安全模式信道层 TransportWithMessageCredential安全模式信道层 TransportCred ...

  7. 一、 Spring IOC 简介

    一 . 什么是IOC(Inversion of Control) IOC :控制反转,也称为依赖注入(DI).听起来有点云里雾里,他到底是个啥,为什么Spirng中最基础的就是它? 我们的项目其实都是 ...

  8. php 04

    前加加(++$a) 先运算后赋值 后加加($a++) 先赋值后运算 -- 前减减(--$a) 先运算后赋值 后减减($a--) 先赋值后运算 连接运算符(字符串运算符) . 神奇的米粒 1. 字符串和 ...

  9. 【Java/Android性能优 4】PreloadDataCache支持预取的数据缓存，使用简单，支持多种缓存算法，支持不同网络类型，扩展性强

    本文转自:http://www.trinea.cn/android/preloaddatacache/ 本文主要介绍一个支持自动向前或向后获取新数据的缓存的使用及功能.Android图片内存缓存可见I ...

  10. Remote System Explorer Operation在eclipse后台一直跑 解决办法

    在用eclipse开发时,经常遇到卡死的情况,其中一种就是右下角出现:“Remote System Explorer Operation”,解决方案如下: 第一步:Eclipse -> Pref ...