<!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. 启动和关闭MySQL服务

    停止mysql服务,说来简单,但不知道的话,还真是挠头.在这和mysql入门的同学们共享:)  正确方法是,进入mysql的bin目录下,然后执行./mysqladmin -uroot -p shut ...

  2. 调试bug心得

    1. 忌主观主义.遇到问题,优先考虑客观排除法,按模块一一屏蔽测试排除.忌自己认为某个模块里的某个逻辑有问题,一直研究修改测试,被其他模块导致的偶然事件所干扰.通过排除法,找到震源,再解决.

  3. H5 继承

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  4. 一个Filter需要配置多个url-pattern

    最近做项目遇到一个Filter需要配置多个url-pattern,上网查了下资料,经测试,现总结下 一.完全错误的方式 Java代码 <filter> <filter-name> ...

  5. JNDI数据源

    孤傲苍狼 只为成功找方法,不为失败找借口! JNDI学习总结(一)——JNDI数据源的配置 一.数据源的由来 在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Cla ...

  6. python准确判断文件类型

    判断文件类型在开发中非常常见的需求,怎样才能准确的判断文件类型呢?首先大家想到的是文件的后缀,但是非常遗憾的是这种方法是非常不靠谱的,因为文件的后缀是可以随意更改的,而大家都知道后缀在linux系统下 ...

  7. HBase预分区方法

    (what)什么是预分区? HBase表在刚刚被创建时,只有1个分区(region),当一个region过大(达到hbase.hregion.max.filesize属性中定义的阈值,默认10GB)时 ...

  8. Java操作XML的工具:JAXB

    JavaArchitecture for XML Binding (JAXB) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反向 ...

  9. Reading——简约至上

    读书感言: 简约至上——Giles Colborne,我去,这是哪里来的渣书,通篇都是泛泛而谈,实在受不鸟了> <,没学到啥实质性的东西,论述一大堆.!!!还姐的20多块钱.最讨厌这样的书 ...

  10. java调.NET webapi时间戳报错问题

    JAVA时间戳长度是13位,如:1294890876859 PHP .NET时间戳长度是10位, 如:1294890859 主要最后三位的不同,JAVA时间戳在.NETPHP中使用,去掉后三位,如:1 ...