1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .c1{
  11.             position: fixed;
  12.             left: 0;
  13.             top: 0;
  14.             right: 0;
  15.             bottom: 0;
  16.             background-color: black;
  17.             opacity: 0.4;
  18.             z-index: 9;
  19.         }
  20.         .c2{
  21.             width: 500px;
  22.             height: 400px;
  23.             background-color: white;
  24.             position: fixed;
  25.             left: 50%;
  26.             top: 50%;
  27.             z-index: 10;
  28.             margin-top: -200px;
  29.             margin-left: -250px
  30.  
  31.         }
  32.     </style>
  33. </head>
  34. <body style="margin: 0">
  35.  
  36.     <div>
  37.         <input type="button" value="添加" onclick="ShowModel();"/>
  38.         <input type="button" value="全选" onclick="ChooseAll();"/>
  39.         <input type="button" value="取消" onclick="CancleAll();"/>
  40.         <input type="button" value="反选" onclick="Reverse();"/>
  41.         <table>
  42.             <thead>
  43.                 <tr>
  44.                     <th>选择</th>
  45.                     <th>主机名</th>
  46.                     <th>端口</th>
  47.                     <th>IP</th>
  48.                 </tr>
  49.  
  50.             </thead>
  51.             <tbody id="tb">
  52.                 <tr>
  53.                     <td><input type="checkbox"></td>
  54.                     <td>hehe</td>
  55.                     <td>90</td>
  56.                     <td>10.192.17.20</td>
  57.                 </tr>
  58.                 <tr>
  59.                     <td><input type="checkbox"></td>
  60.                     <td>haha</td>
  61.                     <td>2375</td>
  62.                     <td>10.192.17.21</td>
  63.                 </tr>
  64.                 <tr>
  65.                      <td><input type="checkbox"></td>
  66.                     <td>gaga</td>
  67.                     <td>6379</td>
  68.                     <td>10.192.17.22</td>
  69.                 </tr>
  70.  
  71.             </tbody>
  72.         </table>
  73.     </div>
  74.     <!-- 遮罩层start-->
  75.     <div id="i1" class="c1 hide">
  76.  
  77.     </div>
  78.     <!-- 遮罩层end-->
  79.     <!--弹出框-->
  80.  
  81.     <div id="i2" class="c2 hide">
  82.  
  83.        <p><input type="text"/></p>
  84.        <p><input type="text"/></p>
  85.        <p>
  86.            <input type="button" value="取消" onclick="HideModel();"/>
  87.            <input type="button" value="确定"/>
  88.        </p>
  89.     </div>
  90.     <!--弹出框-->
  91.     <script>
  92.         //弹框的显示和隐藏ShowModel、HideModel
  93.         function ShowModel(){
  94.             document.getElementById('i1').classList.remove('hide');
  95.             document.getElementById('i2').classList.remove('hide');
  96.         }
  97.         function HideModel(){
  98.             document.getElementById('i1').classList.add('hide');
  99.             document.getElementById('i2').classList.add('hide');
  100.         }
  101.         //全选
  102.         function ChooseAll() {
  103.             //获取所有的tr
  104.             var tbody = document.getElementById('tb');
  105.             var tr_list = tbody.children;
  106.             //循环所有的tr,current_tr
  107.             for (var i = 0; i < tr_list.length; i++) {
  108.                 var current_tr = tr_list[i];
  109.                 var checkbox = current_tr.children[0].children[0];
  110.                 // 给checkbox设置为true就代表勾选，false就代表取消
  111.  
  112.                 checkbox.checked = true;
  113.  
  114.             }
  115.         }
  116.         //取消全选
  117.             function CancleAll() {
  118.                 //获取所有的tr
  119.                 var tbody = document.getElementById('tb');
  120.                 var tr_list = tbody.children;
  121.                 //循环所有的tr,current_tr
  122.                 for (var i = 0; i < tr_list.length; i++) {
  123.                     var current_tr = tr_list[i];
  124.                     var checkbox = current_tr.children[0].children[0];
  125.                     // 给checkbox设置为true就代表勾选，false就代表取消
  126.  
  127.                     checkbox.checked = false;
  128.  
  129.                 }
  130.             }
  131.             //反选
  132.              function Reverse() {
  133.                 //获取所有的tr
  134.                 var tbody = document.getElementById('tb');
  135.                 var tr_list = tbody.children;
  136.                 //循环所有的tr,current_tr
  137.                 for (var i = 0; i < tr_list.length; i++) {
  138.                     var current_tr = tr_list[i];
  139.                     var checkbox = current_tr.children[0].children[0];
  140.                     // 给checkbox设置为true就代表勾选，false就代表取消
  141.                     /*
  142.                     第一种和第二种都可以都能实现反选
  143.                     if (checkbox.checked){
  144.                         checkbox.checked=false;
  145.                     }
  146.                     else
  147.                     {
  148.                        checkbox.checked=true;
  149.  
  150.                     }*/
  151.                     checkbox.checked = ! checkbox.checked;
  152.  
  153.                 }
  154.  
  155.         }
  156.  
  157.     </script>
  158. </body>
  159. </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. Docker容器常用命令汇总

    Docker常用命令总结如下: # 查看docker详细信息 docker info # 获取当前节点所有容器 docker ps -a # 管理容器生命周期 docker [start|stop|r ...

  2. springMVC配置拦截器、过滤器、前端控制器时遇到的问题总结

    1.业务场景:使用vuejs+springMVC+spring框架搭建一个mis系统,集成SSO单点登录: 2.遇到问题:使用interceptor拦截器配置SSO单点登录,直接敲域名,或者ip+端口 ...

  3. 深入理解Java的三大特性之多态

    世界上最美丽的东西,看不见也摸不着,要靠心灵去感受. ——海伦·凯勒 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响类使用的情况下改变类的内部结构,并保护数据.对 ...

  4. 利用JDK自带工具监控JVMCPU和内存指标

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. DockerFile 简单使用

    Dockerfile 是用来构建 Docker 镜像的构建文件,是由一系列命令和参数构成的脚本. 以 CentOS 为例(https://hub.docker.com/_/centos): FROM ...

  6. [java] 将整数在千分位或万分位以逗号分隔表示

    简单使用DecimalFormat的功能就能做到了,代码如下: package com.testEmp; import java.text.DecimalFormat; public class Nu ...

  7. express使用ejs模板引擎渲染html文件

    小场景小知识点. 在使用express过程中,按照官网教程,利用express生成器很容易初始化express项目模板. 那么初始化项目之后应该如何使用ejs作为模板引擎呢?如下 // 注释掉默认生成 ...

  8. 动态绑定v-model

    <template> <div class="pieAll" > <template v-for="(item, index) in tes ...

  9. Java商城秒杀系统的设计与实战视频教程（SpringBoot版）_汇总贴

    51CTO学院 Java商城秒杀系统的设计与实战视频教程(SpringBoot版) H:\BaiDu\微服务0830\2019最新 Java商城秒杀系统的设计与实战视频教程(SpringBoot版) ...

  10. redis集群 应该注意的问题

    redis cluster注意的问题 : ‘cluster-require-full-coverage’参数的设置.该参数是redis配置文件中cluster模式的一个参数,从字面上基本就能看出它的作 ...