<!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. 【Python】Excel操作-1

    #练习:创建Excel 如果要创建的Excel已经存在并打开,会报错 from openpyxl import Workbook wb=Workbook() #创建文件对象 ws=wb.active ...

  2. SQL注入之Sqli-labs系列第九关和第十关（基于时间盲注的注入）

    开始挑战第九关(Blind- Time based- Single Quotes- String)和第十关( Blind- Time based- Double Quotes- String) gog ...

  3. builtroot 添加git 下载方式

    1.buildroot/Config.in 配置default git server eg:config xxxx_GIT_SITE string "git site" defau ...

  4. OSWATCH安装

    .解压安装包 afadb2:/home/oracle$tar -xvf oswbb732.tar (注:先将安装包权限修改为oracle:oinstall,或者对应权限,以ORACLE用户进行解压) ...

  5. 【转】visualSFM生成的bundle.rd.out文件的格式

    1.bundle.out 文件包含了一些经过估算得到的场景和相机几何信息.文件的格式如下: //---------------------------------------------------- ...

  6. 51Nod 1070：Bash游戏 V4（斐波那契博弈）

    1070 Bash游戏 V4  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次拿的数量最少1个 ...

  7. PTA——模拟除法

    PTA 7-42 整除光棍 #include <stdio.h> int main() { ];//创建存表 ,count=; int n; ; scanf("%d", ...

  8. 03 事务，连接池DBCP，C3P0，DBUtils

    事务 Transaction  其实指的一组操作,里面包含许多个单一的逻辑.只要有一个逻辑没有执行成功,那么都算失败. 所有的数据都回归到最初的状态(回滚) 事务的作用:为了确保逻辑的成功. 例子: ...

  9. acm 2084

    ////////////////////////////////////////////////////////////////////////////////#include<iostream ...

  10. php基础-7

    php json数据的读取和转换 将数组转化为json <?php $arr = array('h'=>"hello", "w"=>" ...