<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .zhezhao{

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .add_mod{

            height:400px;

            width:500px;

            position: fixed;

            background-color: white;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0 auto;">

<input type="button" onclick="fun2()" value="添加" />

<input type="button" onclick="choise_all()" value="全选" />

<input type="button" onclick="cancel_all()" value="取消" />

<input type="button" onclick="reverse_all()" value="反选" />

<div>

    <table border="1px">

        <thead>

            <tr>

                <th>选择</th>

                <th>IP</th>

                <th>端口</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><input type="checkbox"/></td>

                <td>1.1.1.1</td>

                <td>900</td>

            </tr>

            <tr id="tb">

                <td><input type="checkbox"/></td>

                <td>1.1.1.2</td>

                <td>902</td>

            </tr>

            <tr>

                <td><input type="checkbox"/></td>

                <td>1.1.1.3</td>

                <td>903</td>

            </tr>

        </tbody>

    </table>

</div>

<!--遮罩层-->

<div id="i1" class="zhezhao hide"></div>

<!--模块弹窗开始-->

<div id="i2" class="add_mod hide">

    <input type="text" />

    <input type="text" />

    <input type="button" onclick="fun1()" value="取消" />

    <input type="button" value="确定" />

</div>

<!--模块弹窗结束-->

<script type="application/javascript">

    function fun1() {

        document.getElementById('i1').classList.add('hide');

        document.getElementById('i2').classList.add('hide');

    }

    function fun2() {

        document.getElementById('i1').classList.remove('hide');

        document.getElementById('i2').classList.remove('hide');

    }

    function choise_all() {

        var tr = document.getElementById('tb');

        var trlist = tr.parentElement.children;

        for (var i=0;i<trlist.length;i++) {

            trlist[i].children[0].children[0].checked = true;

        }

    }

    function cancel_all() {

        var tr = document.getElementById('tb');

        var trlist = tr.parentElement.children;

        for (var i=0;i<trlist.length;i++) {

            trlist[i].children[0].children[0].checked = false;

        }

    }

    function reverse_all() {

        var tr = document.getElementById('tb');

        var trlist = tr.parentElement.children;

        for (var i=0;i<trlist.length;i++) {

            trlist[i].children[0].children[0].checked = ! trlist[i].children[0].children[0].checked;

//            以下是if判断写法

//            if (trlist[i].children[0].children[0].checked) {

//                trlist[i].children[0].children[0].checked = false;

//            }else {

//                trlist[i].children[0].children[0].checked = true;

//            }

        }

    }

</script>

</body>

</html>

　　

dom实例，模态框，全选，反选，取消的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  3. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  4. ----Juquery复选框全选反选及获取选中值Value

    --获取选中值 var pList = ""; $("[name='ckdProd']").each(function () { if ($(this).is( ...

  5. toFixed（）精度丢失；复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  6. jQuery实现复选框全选/所有取消/反选/获得选择的值

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  7. JQuery实现列表中复选框全选反选功能封装

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的 ...

  8. jquery实现全选 反选 取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

  10. 使用JavaScript实现复选框全选与取消的功能

    实现效果: html代码: <body> <input type="checkbox" id="checkAll"/>全选<br& ...

随机推荐

  1. linux c 检测ip变化

    #include <string.h> #include <sys/socket.h> #include <sys/ioctl.h> #include <ne ...

  2. PRCT-1302 the OCR has an invalid ip address

    PRCT-1302 the OCR has an invalid ip address 1. 报错信息 an internal error occurred within cluster verifi ...

  3. Gtk-WARNING **: cannot open display: :0.0

    Gtk-WARNING **: cannot open display: :0.0 https://blog.csdn.net/Rong_Toa/article/details/80365932

  4. Pytorch使用多GPU

    在caffe中训练的时候如果使用多GPU则直接在运行程序的时候指定GPU的index即可,但是在Pytorch中则需要在声明模型之后,对声明的模型进行初始化,如: cnn = DataParallel ...

  5. 服务器上安装caffe的过程记录

    1. 前言 因为新的实验室东西都是新的,所以在服务器上要自己重新配置CAFFE 这里假设所有依赖包学长们都安装好了,我是没有sudo权限的 服务器的配置: CUDA 8.0 Ubuntu 16.04 ...

  6. Unity 思考问题的办法

    Unity 思考问题的办法 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  7. Arrays 类的 binarySearch() 数组查询方法详解

    Arrays类的binarySearch()方法,可以使用二分搜索法来搜索指定的数组,以获得指定对象.该方法返回要搜索元素的索引值.binarySearch()方法提供多种重载形式,用于满足各种类型数 ...

  8. PTA——统计区间内质数

    PTA 7-33 统计素数并求和 #include<stdio.h> #include<math.h> int prime(int p); int main() { int m ...

  9. c++——引用的使用

    1.使用引用避免拷贝 c++中拷贝大的类类型对象或容器对象比较低效,甚至有的类型不支持拷贝,这种情况下只能通过引用形参访问该类型的对象 当函数无需修改引用形参的值时,最好使用常量引用 例1:返回两个字 ...

  10. OS模块（与操作系统交互）

    os 模块提供了很多允许你的程序与操作系统直接交互的功能 得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 返回指定目录下的所有文件和目录名:os.listdir() ...