<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>JQ实现正、反选</title>

 </head>

 <body>

     <table  border="1px" style="width: 200px;margin-bottom: 10px">

         <thead>

             <tr>

                 <th>#</th>

                 <th>姓名</th>

                 <th>性别</th>

             </tr>

         </thead>

         <tbody>

             <tr>

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

                 <td>Alex</td>

                 <td>女</td>

             </tr>

             <tr>

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

                 <td>Egon</td>

                 <td>女</td>

             </tr>

             <tr>

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

                 <td>Qimi</td>

                 <td>女</td>

             </tr>

         </tbody>

     </table>

     <input type="button"  value="全选" id="i1" class="c1">

     <input type="button" value="反选" id="i2" class="c1">

     <input type="button" value="取消" id="i3">

     <script src="jquery-3.2.1.js"></script>

     <script>

         // <!-----------------------------------全选------------------------------------>

         var $in_1 = $("#i1");

         //用第一种循环的方式全部选中,each的循环体不用加索引取值

         // $in_1.on("click",function () {

         //     var $cheele = $(":checkbox");

         //     $cheele.each(function () {

         //         //为input标签增加固有属性checked

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

         //     })

         // });

         //用第二种循环的方式全部选中

         // $in_1.click("click",function () {

         //     var $cheele = $(":checkbox");

         //     $.each($cheele,function () {

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

         //     })

         // });

         //另一种全选的方法

             //要执行的语句不能直接你跟在","之后！！！

         $in_1.on("click",function () {

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

         });

         //-----------------------------------------取消--------------------------------------------------

         var $in_2 = $("#i3");

         $in_2.on("click",function () {

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

         });

         //-----------------------------------------反选--------------------------------------------------

         var $in_3 = $("#i2");

         $in_3.on("click",function () {

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

                 $(this).prop("checked",!$(this).prop("checked"));

             })

         });

     </script>

 </body>

 </html>

JQuery实现全选、反选和取消功能的更多相关文章

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

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

  2. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. jquery实现全选/反选功能

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. jQuery实现全选/反选和批量删除

    <%@ page language="java" contentType="text/html; charset=utf-8"     pageEncod ...

  5. jQuery实现全选反选功能

    废话不说,直接上代码! <html> <head> <meta http-equiv="Content-Type" content="tex ...

  6. jquery实现全选 反选 取消

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

  7. jquery 实现全选反选

    jquery代码 $(function () { $('#inputCheck').click(function () { if ($(this).attr("checked")) ...

  8. jquery checkbox 全选反选代码只能执行一遍，第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

  9. jQuery checkbox全选 和全部取消

    1.chkAll选中,全部chk选中  ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...

  10. js实现全选与全部取消功能

    function checkAll() { //把所有参与选择的checkbox使用相同的name,这里为"num_iid"    var eles = document.getE ...

随机推荐

  1. guestfs-python 手册

    Help on module guestfs: NAME guestfs - Python bindings for libguestfs FILE /usr/lib64/python2.7/site ...

  2. 【HDU2825】Wireless Password【AC自动机，状态压缩DP】

    题意 题目给出m(m<=10)个单词,每个单词的长度不超过10且仅由小写字母组成,给出一个正整数n(n<=25)和正整数k,问有多少方法可以组成长度为n的文本且最少包含k个给出的单词. 分 ...

  3. Item2的使用

    网址:http://wulfric.me/2015/08/iterm2/ 巧用 Command 键 按住⌘键: 可以拖拽选中的字符串: 点击 url:调用默认浏览器访问该网址: 点击文件:调用默认程序 ...

  4. TCP与UDP与HTTP协议

    http:是用于www浏览的一个协议.tcp:是机器之间建立连接用的到的一个协议. 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.R ...

  5. spring4-2-bean配置-3-自动装配

  6. 2PC之JTA原理与实现

    转自:https://www.ibm.com/developerworks/cn/java/j-lo-jta/index.html 利用 JTA 处理事务 什么是事务处理 事务是计算机应用中不可或缺的 ...

  7. p4364 [九省联考2018]IIIDX

    传送门 分析 我们先考虑如果所有数都不相同我们应该怎么办 我们可以直接贪心的在每个点放可行的最大权值 但是题目要求可以有相同的数 我们可以考虑每次让当前节点可发且尽量大的同时给兄弟节点留的数尽量大 我 ...

  8. HUST软测1504班第4周小组作业成绩：WordCount优化

    说明 本次公布的成绩为第四周作业的结果: 第4周小组作业:WordCount优化 博客推荐:本次作业有一位同学完成有创意,推荐优秀博客.(优秀博客不会对成绩带来正面或者负面影响)PS:做任何创新的任务 ...

  9. Perl语言编程>>学习笔记2

    1. Perl中变量的常用表示  ${var} 相当于 $var  $Dog::days  在Dog包里面的变量$days  $#days  @days 的最后一个索引  ]  $days 引用的数组 ...

  10. CAD&CG GDC 2018大会论文录用名单

    Section 1 增强现实与图形学: 报告时间:2018-8-25 14:00-15:30 报告地点:会议室1 P000009 基于增强现实的产品质量信息传递方法 P000104 重彩画的风格转移 ...