<!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. Map存储容量及内存占用测试

    Integer a = 1; long start = 0; long end = 0; // 先垃圾回收 System.gc(); start = Runtime.getRuntime().free ...

  2. 国外物联网平台（4）：Ayla Networks

    国外物联网平台(4)——Ayla Networks 马智 定位 Ayla企业软件解决方案为全球部署互联产品提供强大的工具 功能 Ayla的IoT平台包含3个主要组成部分: (1) Ayla嵌入式代理A ...

  3. C# DataGridView控件动态添加新行

    C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...

  4. ubuntu 14.04 x64下安装libreoffice

    LibreOffice是ubuntu 上的办公软件很多人都知道微软公司的的Word.Excel.PowerPoint和Outlook,但是很少有人知道LibreOffice. LibreOffice靠 ...

  5. 微信支付接入的总结 —— NATIVE & MWEB & JSAPI

    这段时间工作中需要对接微信支付,而且要多个端同时进行接入,web端,手机浏览器,微信浏览器,所以研究了下.不同场景选择合适的接入方式是必须的.https://pay.weixin.qq.com/wik ...

  6. 新建项目下的web文件夹下的dynamic web project和static web project和web fragment project的区别

    dynamic web project是Eclipse的项目,与其对应的有static web project,前者指动态web项目,包含一些动态代码,如java:而static web projec ...

  7. 动态内存分配存在的问题（内存空洞）------c++程序设计原理与实践（进阶篇）

    new的问题究竟在哪里呢?实际上问题出在new和delete的结合使用上.考察下面程序中内存分配和释放过程: while(1){ Big* p=new big; //...... Small* n1= ...

  8. day1学python Hello Python

    Hello Python 本人使用的是Pycharm编译器 ----------------------------------------------- 1.输出 2.赋值 3.‘’‘/“”“ 多行 ...

  9. Educational Codeforces Round 62 (Rated for Div. 2)E(染色DP，构造，思维，组合数学)

    #include<bits/stdc++.h>using namespace std;const long long mod=998244353;long long f[200007][2 ...

  10. &(引用) 和 *(指针)

    引用: 引用相当于给引用的对象起一个别名,对引用的操作即是对原对象的操作. 使用方式: int cnt = 1024; int &x = cnt; 一般情况下引用的类型要和被引用对象一致(例外 ...