<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.4;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            z-index: 10;

            margin-top: -200px;

            margin-left: -250px

        }

    </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="Reverse();"/>

        <table>

            <thead>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                    <th>IP</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

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

                    <td>hehe</td>

                    <td>90</td>

                    <td>10.192.17.20</td>

                </tr>

                <tr>

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

                    <td>haha</td>

                    <td>2375</td>

                    <td>10.192.17.21</td>

                </tr>

                <tr>

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

                    <td>gaga</td>

                    <td>6379</td>

                    <td>10.192.17.22</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- 遮罩层start-->

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

    </div>

    <!-- 遮罩层end-->

    <!--弹出框-->

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

        //弹框的显示和隐藏ShowModel、HideModel

        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() {

            //获取所有的tr

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

            var tr_list = tbody.children;

            //循环所有的tr,current_tr

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

                var current_tr = tr_list[i];

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

                // 给checkbox设置为true就代表勾选，false就代表取消

                checkbox.checked = true;

            }

        }

        //取消全选

            function CancleAll() {

                //获取所有的tr

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

                var tr_list = tbody.children;

                //循环所有的tr,current_tr

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

                    var current_tr = tr_list[i];

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

                    // 给checkbox设置为true就代表勾选，false就代表取消

                    checkbox.checked = false;

                }

            }

            //反选

             function Reverse() {

                //获取所有的tr

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

                var tr_list = tbody.children;

                //循环所有的tr,current_tr

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

                    var current_tr = tr_list[i];

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

                    // 给checkbox设置为true就代表勾选，false就代表取消

                    /*

                    第一种和第二种都可以都能实现反选

                    if (checkbox.checked){

                        checkbox.checked=false;

                    }

                    else

                    {

                       checkbox.checked=true;

                    }*/

                    checkbox.checked = ! checkbox.checked;

                }

        }

    </script>

</body>

</html>

JavaScript-checkbox标签-隐藏、显示、全选、取消和反选等操作的更多相关文章

  1. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  2. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  3. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  4. js实现checkbox的全选/取消

    所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...

  5. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  6. Android开发CheckBox控件，全选，反选，取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

  7. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  8. 纯javascript实现选择框的全选与反选

    HTML部分 <div id="wrap_input_box" > <input type="checkbox"><br> ...

  9. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  10. jquery 全选/取消全部

    html /*主要按钮*/ <td><input type="checkbox" id="checkAllChange" /></ ...

随机推荐

  1. Wox使用指南

    下载安装 从下载地址下载最新版本的 wox ,我下载的是 exe 版的 Wox-1.3.578.exe 下载以后直接安装即可,不会有选择项,安装成功以后会在屏幕上出现一个搜索框,默认失去焦点以后搜索框 ...

  2. mysql数据库的索引

    什么是索引 索引就是一种优化查询的数据结构: 为什么要加索引 因为创建索引可以大大提高系统的查询性能. 怎么提高查询性能的 简单的理解:一张数据量比较大的表格如果没有添加任何索引,那我们在执行查询的时 ...

  3. Flutter移动电商实战 --（11）首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  4. Appnium安装

    Refer to https://blog.csdn.net/xgh1951/article/details/85124327

  5. debian上搭建私有docker仓库

    docker官方仓库是docker hub.虽然很好用,但是无法满足私密性的要求. 如果只需要在局域网内或者朋友圈内分享各自制作的image,那么,搭建属于自己的docker仓库变得很有必要. 一.环 ...

  6. selenium操作cookie

    1,登录网页,使用webdriver的get_cookies获取cookie,并保存json文件 2,读取json文件,遍历添加网站使用的每一个cookies的name,value. 使用add_co ...

  7. Python3+RobotFramewok RIDE环境搭建（一）

    工欲善其事,必先利其器,RIDE目前可以比较稳定的支持python3了,这里简单介绍一下环境的部署,建议多看看读一读官方文档,对能力提升很有帮助,很简单的三步: (1)安装python3,不详细介绍了 ...

  8. Linux终端中文显示乱码

    今天,帮我们同学处理一下中文显示乱码的问题.这个是个国内Linux用户烦恼的问题,由于大部分的Linux发行版都是以英语为主体的,而且英文在通用性和稳定性上都比中文要好一些,各种奇怪的BUG也要少一点 ...

  9. OpenCV画图(画OpenCV的标志)

    import numpy as np import cv2 img = np.ones((512, 512, 3), np.uint8)*255 # 画椭圆 # 图片 (圆心) (短轴长,长轴长),旋 ...

  10. javaweb期末项目-stage1-part1-需求分析（Requirements analysis）

    需求分析文档.rar-下载 说明:解压密码为袁老师的全名拼音(全小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish/p/10828672.html 需求分 ...