<!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. ASP.NET MVC Bundles 用法和说明（打包javascript和css）

    本文主要介绍了ASP.NET MVC中的新功能Bundles,利用Bundles可以将javascript和css文件打包压缩,并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便 ...

  2. yii2 队列 shmilyzxt/yii2-queue 简介

    在yii2论坛中看到一个关于队列的帖子,感觉不错.http://www.yiichina.com/extension/1084 (注:SendMail 错写为 SendMial,粘贴时要注意了.) 在 ...

  3. WAS 部署 Birt 报表出现 error.CannotStartupOSGIPlatform 和 更新web.xml

    在WAS7.0中部署Birt报表会出现error.CannotStartupOSGIPlatform错误,通常需要这样修改 1.依次打开Applications->WebSphere enter ...

  4. Neo4j图数据库

    01. 图数据库 图数据库是专门存储和检索大量信息网络的存储引擎.它可以有效地将数据存储为节点和关系,并允许高性能检索和查询这些结构.属性可以添加到节点和关系.节点可以用零个或多个标签标注,关系总是定 ...

  5. 关于发布中报“未能加载文件或程序集“Newtonsoft.Json”或它的某一个依赖项”的问题解决方法

    遇到这个问题了,我也是醉了,开发就一个还在忙别的事情,我想想自己解决 你们遇到过吗?我在网上找到好多解决的方法,比如改webconfig文件,或者改package.config文件,都没用.但是我看到 ...

  6. c++ 智能指针【转载】

    zero 坐在餐桌前,机械的重复“夹菜 -> 咀嚼 -> 吞咽”的动作序列,脸上用无形的大字写着:我心不在焉.在他的对面坐着 Solmyr ,慢条斯理的吃着他那份午餐,维持着他一贯很有修养 ...

  7. 转换Json中的时间戳为标准时间格式

    //出自http://www.cnblogs.com/ahjesus function ConvertJSONDateToJSDate(jsonDate) {        ///    <su ...

  8. ps 命令的详细功能解析

    转自:http://www.cnblogs.com/wangkangluo1/archive/2011/09/23/2185938.html 要对进程进行监测和控制,首先必须要了解当前进程的情况,也就 ...

  9. 读书笔记 之《Thinking in Java》(对象、集合)

    一.前言: 本来想看完书再整理下自己的笔记的,可是书才看了一半发现笔记有点多,有点乱,就先整理一份吧,顺便复习下前面的知识,之后的再补上. 真的感觉,看书是个好习惯啊,难怪人家说"书籍是人类 ...

  10. 设计模式(1)--Prototype(原型模式)--创建型

    1.模式定义: 原型模式就是用原型实例指定创建对象的种类,并且通过复制这些原型创建新的对象. 2.使用场景: 在原型模式中我们可以利用过一个原型对象来指明我们所要创建对象的类型,然后通过复制这个对象的 ...