<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <input type="button" value="全选" onclick="checkAll()">

     <input type="button" value="反选" onclick="reverseAll()">

     <input type="button" value="取消" onclick="cancleAll()">

     <table border="1">

         <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>80</td>

             </tr>

             <tr>

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

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

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

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

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

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

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

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

         </tbody>

     </table>

     <script type="text/javascript" src='jquery-3.2.1.js'></script>

     <script type="text/javascript">

         function checkAll(){

             $(':checkbox').prop('checked',true);

         }

         function cancleAll() {

             $(':checkbox').prop('checked',false);

         }

         function reverseAll(){

             $(':checkbox').each(function(){

                 var  v = $(this).prop('checked')? false:true;   /*三元运算： var v = 条件? 真值:假值*/

                 $(this).prop('checked',v)

             })

         }

     </script>

 </body>

 </html>

jQuery菜单示例（全选，反选，取消）的更多相关文章

  1. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  2. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  3. Jquery 1.8全选反选删除选中项实现

    JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...

  4. jquery实现全选 反选 取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Jquery实现checkbox全选、取消全选和反选

    最近在看廖雪峰的Jquery教程,事件篇的练习题比较综合,研究了很久终于研究出来了,现在分享出来,提供给小白学习.题目如下: 首先要获取到全选checkbox和每一项的checkbox,然后通过逻辑代 ...

  6. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  7. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. JQuery一句话实现全选/反选

    $("#checkAll").click(function () { if (this.checked) {     $("input[name='checkbox']& ...

  9. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  10. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

随机推荐

  1. RxSwift 系列(九) -- 那些难以理解的概念

    前言 看完本系列前面几篇之后,估计大家也还是有点懵逼,本系列前八篇也都是参考RxSwift官方文档和一些概念做的解读.上几篇文章概念性的东西有点多,一时也是很难全部记住,大家脑子里面知道有这么个概念就 ...

  2. Python获取股票历史、实时数据与更新到数据库

    要做量化投资,数据是基础,正所谓"巧妇难为无米之炊" 在免费数据方面,各大网站的财经板块其实已提供相应的api,如新浪.雅虎.搜狐...可以通过urlopen相应格式的网址获取数据 ...

  3. JavaScript中正则表达式判断匹配规则以及常用的方法

    JavaScript中正则表达式判断匹配规则以及常用的方法: 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在. 正则表达式是一种用来匹配字符串的强有力的武器.它的设计思想 ...

  4. ABP+AdminLTE+Bootstrap Table权限管理系统第八节--ABP错误机制及AbpSession相关

    上一节我们讲到登录逻辑,我做的登录逻辑很简单的,我们来看一下abp module-zero里面的登录代码. #region Login / Logout public ActionResult Log ...

  5. NYOJ--42--dfs--一笔画问题

    /* Name: NYOJ--42--一笔画问题 Author: shen_渊 Date: 18/04/17 15:22 Description: 这个题用并查集做,更好.在练搜索,试试手 本来用的v ...

  6. java ArrayList 踩坑记录

    做编程的一个常识:不要在循环过程中删除元素本身(至少是我个人的原则).否则将发生不可预料的问题. 而最近,看到一个以前的同学写的一段代码就是在循环过程中删除元素,我很是纳闷啊.然后后来决定给他改掉.然 ...

  7. 序列化之protobuf与avro对比(Java)

    最近在做socket通信中用到了关于序列化工具选型的问题,在调研过程中开始趋向于用protobuf,可以省去了编解码的过程.能够实现快速开发,且只需要维护一份协议文件即可. 但是调研过程中发现了pro ...

  8. Luogu P2966 [USACO09DEC]牛收费路径Cow Toll Paths

    题目描述 Like everyone else, FJ is always thinking up ways to increase his revenue. To this end, he has ...

  9. IPython+：一个交互式计算和开发环境

    一. IPython基础 代码自动补全:Tab键 可补全内容包括:变量名.函数名.成员变量函数.目录文件 内省(Itrospection) 在变量名之前或之后加上问号(?),这样可以显示这个对象的相关 ...

  10. MySQL如何记录binlog

    --MySQL如何记录binlog   -------------------------------2014/07/08     binlog文件的内容 log event       MySQL的 ...