<!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. NSArray & NSDictionary

    一.NSArray 1.1 简单创建方法由难到简 NSArray *arr = [[NSArray alloc] init]; NSArray *arr = [NSArray arrayWithObj ...

  2. 91. Decode Ways反编译字符串

    ［抄题］: A message containing letters from A-Z is being encoded to numbers using the following mapping: ...

  3. 3-为什么很多 对 1e9+7(100000007)取模

    首先有很多题目的答案是很大的,然而出题人的本意也不是让选手写高精度或者Java,所以势必要让答案落在整型的范围内.那么怎么做到这一点呢,对一个很大的质数取模即可(自行思考为什么不是小数).那么如果您学 ...

  4. SpringBoot与Shiro的整合(单体式项目)

    1.包结构 2.jar包,配置文件,类 2.1pom.xml文件配置 <?xml version="1.0" encoding="UTF-8"?> ...

  5. code1316 文化之旅

    文化之旅的本质是最短路问题,只不过添加了一个文化排斥,仅需要做最短路时判断一下是否排斥即可 因为数据较小,采用了Floyd算法,以下是代码,关键部分附注释: #include<iostream& ...

  6. myeclipse如何取消对某个文件的验证

    在用Myeclipse导入新工程或在写代码时,最郁闷的就是它对js,jsp,html的验证太严格了,有时会呈现一个红叉或者一个黄色的感慨号,一运行就报Cannot return from outsid ...

  7. mongodb新建用户，

    1.用管理 员用户登录mongoDB use hzb_test db.createUser({user: "hzb",pwd: "hzb",roles: [{ ...

  8. Fiddldr 教程之：HTTP协议详解（转）

    原文地址:http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html HTTP协议详解 当今web程序的开发技术真是百家争鸣,ASP ...

  9. Open Type vs Open resource

    Open Type 可查询所有java 类型,包括.java .class Open Resource 只能打开 .java 等 ,不能打开 .class 相同点 都可以使用 ? * 通配符

  10. .NET基础 （04）基础类型和语法

    基础类型和语法1 .NET中所有内建类型的基类是什么2 System.Object中包含哪些方法,哪些是虚方法3 值类型和引用类型的区别4 简述装箱和拆箱原理5 C#中是否有全局变量6 struct和 ...