<!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. ShadowVolume

    [ShadowVolume] 1.z-pass 算法. z-pass 是 shadow volume 一开始的标准算法,用来确定某一个象素是否处于阴影当中.其原理是: Pass1:enable z-b ...

  2. Quaternion.identity是什么意思？

    Quaternion.identity就是指Quaternion(0,0,0,0),

  3. Codeforces 667C DP

    题意:给你一个字符串,这个字符串的构造方法如下:先选择一个长度大于4的前缀,然后每次向字符串尾部添加一个长度为2或者长度为3的后缀,不能添加连续的相同的后缀,问可能的后缀有哪些?并按字典序输出去. 思 ...

  4. 小程序本地资源无法通过 css 获取

    background-image:可以使用网络图片,或者 base64,或者使用<image/>标签

  5. 新手教程: 如何在新浪云计算SAE里部署代码

    感谢 sou6 的投递 时间:2011-11-22 来源:老夏博客 SAE自2011-7-10日起,全面支持SVN代码部署,用户不仅可以通过任何SVN客户端部署代码,而且SAE现有的代码部署方式也已经 ...

  6. 获取网页上的所有QQ号码，并生成exel报表

    需要的jar如下: package jsoup.zr.com.utils; /** * * @author LF * */ public class Constant { /** * 网站链接地址ַ ...

  7. pkg-config的妙用

    1.每个lib下都会有个pkg-config文件夹,里面有相应pc文件 修改里面内容可以改变pkg-config显示 2.将.pc文件所在路径添加到PKG_CONFIG_PATH中如: export ...

  8. LoadRunner11学习记录七 -- 负载生成器、事务&集合点顺序、HTML&URL录制

    1.什么情况下用到负载生成器? 当需要使用多台测试机对同一服务器同时压力测试时,需要配置负载生成器. 2.LoadRunner中事务和集合点的放置顺序问题 1)事务放在集合点前面 这时事务的时间包含了 ...

  9. [C++] NEW Advanced Usage

    NEW Advanced Usage 将分配的内存限定在特定的一块区域 #include<iostream> #include<new> ); ); }; using name ...

  10. code3027 线段覆盖2

    dp 数据:d[i].a d[i].b d[i].v 分别表示第i条线段的起始点,结束点,价值 先按d[i].b排好序 dp[i]表示前i条线段的最大价值 方程: dp[i]=max{ dp[i-1] ...