<!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. POJ 2068 NIm (dp博弈，每个人都有特定的取最大值）

    题目大意: 有2n个人,从0开始编号,按编号奇偶分为两队,循环轮流取一堆有m个石子的石堆,偶数队先手,每个人至少取1个,至多取w[i]个,取走最后一个石子的队伍输.问偶数队是否能赢. 分析: 题目数据 ...

  2. 1101 Quick Sort（25 分

    There is a classical process named partition in the famous quick sort algorithm. In this process we ...

  3. VSCode makedown增强插件

    Markdown Preview Enhanced https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

  4. 练习三十八：矩阵for循环应用

    习题如下: 求一个3*3矩阵对角线元素之和 利用for循环控制输出二维数组,再将a[i][j]累加后输出 a = [] sum1 = 0.0 for i in range(3): a.append([ ...

  5. excel单元格内容拆分

    这几天在整理数据,但是数据都在表格的一个单元格中,看起来很不方法,所以在网上找到excel单元格内如拆分的方法,并亲测有效 介绍2种拆分的方法 方法一: (1)在B1输入公式=right(text,[ ...

  6. 02-----body签中相关标签

    大纲 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> 排版标 ...

  7. 自动生成actionbar 所需图片和style

    http://jgilfelt.github.io/android-actionbarstylegenerator/

  8. mangodb与mysql的区别及部署

    一, mangodb与mysql的区别 mangoDB与MYSQL都是开源的数据库,但是mysql是传统的关系型数据库,mangdb则是非关系型数据库,也可以称之为文档型数据库,是一种NoSQL的数据 ...

  9. Android中常用的几种加密

    1.数字摘要 是指通过算法将长数据变为短数据,通常用来标识数据的唯一性,是否被修改,常用的加密算法有md5和sha1两种,如Android的App签名也是用的这两种算法. md5具有不可逆性,也可用来 ...

  10. Python踩坑之旅其一杀不死的Shell子进程

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4 坑后扩展 1.4.1 扩展知识 1.4.1 技术关键字 1.5 填坑总结 1.1 踩坑案例 踩坑的程序是个常驻的Agent类管理进程 ...