<!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. Hadoop的配置过程（虚拟机中的伪分布模式）

    1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...

  2. 如何将 Microsoft Bot Framework 机器人部署以及网页应用

    <Bot Framework>是微软开发的一款可让任何人制作自己的聊天机器人.该工具可以理解自然语言并对图片进行分析等,初期开放了 22 个可集成到应用的 API. 首先说到Bot大家的第 ...

  3. 存储结构比较vector,list,dequeue,stack(转)

        vector适用:对象数量变化少,简单对象,随机访问元素频繁list适用:对象数量变化大,对象复杂,插入和删除频繁最大的区别是,list是双向的,而vector是单向的.因此在实际使用时,如何 ...

  4. docker在Centos上的安装

    Centos6安装docker 系统:centos6.5 内核:3.10.107-1(已升级),docker对RHEL/Centos的最低内核支持是2.6.32-431,epel源的docker版本推 ...

  5. MySQL优化 - 所需了解的基础知识

    时隔一年半,期间一直想写但却觉得没有实质性的内容可记录,本文为 [高性能MySQL] 的学习日志整理分享(感兴趣建议读原书). 优化应贯穿整个产品开发周期中,开发过程中考虑一些性能问题与影响,总比出问 ...

  6. Vmware虚拟机三种网络模式详解

    原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 我怕链 ...

  7. 读取txt文件加DevExpress之进度条progressBarControl

    进度条使用 主要掌握下边几个命令, //水平进度条 progressBarControlH.Properties.Minimum = 0;//1:设置最大数量,比如读取txt文件内容,先要查出行数,然 ...

  8. C语言程序设计进阶 翁恺 第4周编程练习

    第4周编程练习 查看帮助 返回 第4周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业 ...

  9. 14. Longest Common Prefix【leetcode】

    14. Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...

  10. javascript的词法作用域

    这个概念是js中相当基础也是极为重要的,很多想当然的错误或感觉怪异的问题都是和这个东西有关.所以,本文主要说下这个名词的概念以及讨论下他牵扯出来的有关变量.函数.闭包的问题. 由变量开始谈 习惯性先来 ...