<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

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

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

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

 <table border="1" >

     <thead>

     <tr>

         <td>选择</td>

         <td>IP</td>

         <td>端口</td>

     </tr>

     </thead>

     <tbody id="tb">

     <tr>

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

         <td>192.168.1.1</td>

         <td>8080</td>

     </tr>

     <tr>

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

         <td>192.168.1.1</td>

         <td>8080</td>

     </tr>

     <tr>

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

         <td>192.168.1.1</td>

         <td>8080</td>

     </tr>

     </tbody>

 </table>

 <!--引入jquery-->

 <script src ='jquery-1.12.4.js'></script>

 <script>

     // 全选

 function checkAll() {

    $('#tb :checkbox').prop('checked',true);//将id是tb的下面的所有的checkbox的值设置为true,porp是列出所有元素

 }

     // 取消

 function cancelAll() {

    $('#tb :checkbox').prop('checked',false);//将id是tb的下面的所有的checkbox的值设置为false

 }

     // 反选

 function reverseAll() {

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

         // this代指当前循环的每一个元素

        // 反选

        // console.log(this);

        // console.log($(this));

               //Dom来实现

        // if(this.checked){

        //     this.checked = false;

        // }else{

        //     this.checked = true;

        // }

              //jQuery来实现

        // prop：

        //      prop('checked')查看是否被选定

        //  prop('checked',false)将值设置为false

        //

        // if($(this).prop('checked')){

        //      $(this).prop('checked',false);

        // }else {

        //      $(this).prop('checked',true);

        // }

        //          三元运算来实现

        //          v = 条件？真值：假值

        // var v = $(this).prop('checked')?false:true;

        // $(this).prop('checked',v);设置值

        // 也可以写成下面这种

       $(this).prop('checked')?$(this).prop('checked',false):$(this).prop('checked',true);

    })

 }

 </script>

 </body>

 </html>

知识点:

prop()方法设置或返回被选元素的属性和值

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对

each（）方法规定为每个匹配元素规定运行的函数。用法each(function(){})

效果如下图:

jquery实现全选、取消反选、加JavaScript三元运算（三种法法实现反选）的更多相关文章

  1. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

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

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

  3. （转载）jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  5. jquery 1.9版本下复选框 全选/取消实现

    http://zhangzhaoaaa.iteye.com/blog/1914497 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran ...

  6. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  7. jquery实现全选、反选、不选

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

  8. jquery checkbox全选，全不选，反选方法，jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

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

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

随机推荐

  1. 提高mysql千万级大数据SQL查询优化30条经验

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  2. testlink迁移

    前置配置:安装mysql-5.5.13-win32版数据库(速度快点),设置root密码为123465(mysql5.5数据库端口号不要与redmine的mysql冲突) 1.安装testlink(版 ...

  3. (转)linux配置网卡的命令

    linux配置网卡的命令 原文:http://blog.51cto.com/lanxianting/1754923 1.配置命令 如果一台服务器需要通外网,能被远程连接,就得给这个台服务器配置ip,子 ...

  4. smarty模板引擎之if, elseif else

    Smarty 中的 if 语句和 php 中的 if 语句一样灵活易用,并增加了几个特性以适宜模板引擎. if 必须于 /if 成对出现. 可以使用 else 和 elseif 子句. 可以使用以下条 ...

  5. linux系统redis配置环境变量

    1.测试:在任何位置登录redis redis-cli 指定服务器ip(不指定时,默认本机) redis-cli -h 127.0.0.1 指定端口(不指定时,默认6379) redis-cli -h ...

  6. Docker | 第五章：构建自定义镜像

    前言 上一章节,主要是介绍了下Dockerfile的一些常用命令的说明.我们知道,利用Dockerfile可以构建一个新的镜像,比如运行Java环境,就需要一个JDK环境的镜像,但直接使用公共的镜像时 ...

  7. es6声明对象以及作用域与es5对比

    es6声明变量: let x=1;//声明一个变量 const y=2;//声明一个只读常量,声明时必须赋值,之后值不可修改 es5声明变量: var z=3;//声明一个变量 区别: let不存在变 ...

  8. vue实现选中列表功能

    <template> <div> <ul v-for="prop in items"> <dt>{{prop.name}}</ ...

  9. cocos2d-x 学习资料汇总

    cocos2d-x配置问题 - 我要飞的更高 - 博客频道 - CSDN.NET Cocos2d-x win7 + vs2010 配置图文详解(亲测) - 子龙山人 - 博客园 WINDONWS7+V ...

  10. linux中配置yum源

    1.配置163或者阿里云yum源: 阿里云yum源地址:https://mirrors.aliyun.com/centos/6.9/os/x86_64/Packages/ 阿里云给出的解决办法:htt ...