<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dom复选框操作</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0;">

    <div>

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

        <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">

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>1.1.1.1</td>

                    <td>190</td>

                </tr>

                <tr>

                    <td><input type="checkbox"f id="test" /></td>

                    <td>1.1.1.2</td>

                    <td>192</td>

                </tr>

                <tr>

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

                    <td>1.1.1.3</td>

                    <td>193</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- 遮罩层开始 -->

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

    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->

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

        <p><input type="text" /></p>

        <p><input type="text" /></p>

        <p>

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

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

        </p>

    </div>

    <!-- 弹出框结束 -->

    <script>

        function ShowModel(){

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

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

        }

        function HideModel(){

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

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

        }

        function ChooseAll(){

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

            // 获取所有的tr

            var tr_list = tbody.children;

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

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = true;

            }

        }

        function CancleAll(){

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

            // 获取所有的tr

            var tr_list = tbody.children;

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

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = false;

            }

        }

        function ReverseAll(){

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

            // 获取所有的tr

            var tr_list = tbody.children;

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

                // 循环所有的tr，current_tr

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

    </script>

</body>

</html>

JS及Dom练习 | 模态对话框及复选框操作的更多相关文章

  1. python之tkinter使用-复选框操作

    # tkinter复选框操作 import tkinter as tk root = tk.Tk() root.title('问卷调查') root.geometry('220x80') # 设置窗口 ...

  2. C#：复选框操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  3. 006.MFC_对话框_复选框_单选钮

    对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Ca ...

  4. seleniumu 3.0复选框操作(定位一组元素）

    一般验证复选框是否可以选择点击常用到定位一组元素去循环遍历执行点击事件.但是有时候在不同的浏览器下可能会存在差异化的最终结果. 目前谷歌浏览器常常存在多次点击同一复选框,导致最终最后两项复选框均未被勾 ...

  5. 【jQuery】对于复选框操作的attr与prop

    这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...

  6. jQuery——复选框操作

    学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...

  7. DataGridView 复选框 操作大全

    DataGridViewCheckBoxColumn dtCheck = new DataGridViewCheckBoxColumn(); dtCheck.DataPropertyName = &q ...

  8. python selenium单/复选框操作

    一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...

  9. [asp.net] 通过JS实现对treeview控件的复选框单选控制。

    前端JS代码: //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.no ...

随机推荐

  1. vmware10安装Arch

    必须保证机器能够上网! 1.vmware10中创建虚拟机(跟虚拟机中安装其他系统同样的操作). 2.开启上一步中创建的虚拟机. 3选择第一项进入 4自动进入root命令行 5进入 /dev (进行分区 ...

  2. C#Async,await异步简单介绍

    C# 5.0 引入了async/await,.net framework4.5开始支持该用法 使用: 由async标识的方法必须带有await,如果不带await,方法将被同步执行 static vo ...

  3. C# 属性与字段

    属性和字段的区别: 属性是逻辑字段,是字段的扩展,并不占用实际的内存:而字段占用内存空间. 属性可以被其他类访问:而非public的字段不能被直接访问. 属性可以对接受的数据在范围上做限定:而字段不能 ...

  4. android android studio

     android studio 一.安装及步骤: Android Studio安装: java jdk安装: jdk环境变量配置: 二.遇到的问题: 1.缺少jvm或java jdk路径不对,请指定正 ...

  5. LOJ#10106. 「一本通 3.7 例 2」单词游戏

    题目链接:https://loj.ac/problem/10106 题目描述 来自 ICPC CERC 1999/2000,有改动. 有 NNN 个盘子,每个盘子上写着一个仅由小写字母组成的英文单词. ...

  6. Nginx conf基本配置

    #定义Nginx运行的用户和用户组 user www www;   #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8;   #全局错误日志定义类型,[ debu ...

  7. 去掉textarea 右下角图标 resize: none;

    如下图默认右下角有小图标: 加个样式: resize: none;就可以了:

  8. linux命令笔记，零散记录<不完整，学习用>

    uname -a 输出系统架构 cp 源文件 目标文件 mv同理 tar –xvf file.tar // 解压 tar包 tar -zxvf file.tar.gz // 解压tar.gz tar ...

  9. kali linux之手动漏洞挖掘一

    默认安装漏洞 phpmyadmin/setup默认安装 ubuntu/debian默认安装php5-cgi phpmyadmin/setup默认安装 使用?-d+allow_url_include%3 ...

  10. SQL语句优化 -- 以Mysql为例

     本文参考下面的文章:    1: [真·干货]MySQL 索引及优化实战 2:  Mysql语句的执行过程 3:  sql优化的几种方法 我将  sql语句优化分为三个方面,(此处不包括 业务逻辑的 ...