主要知识点：

prop()--主要检查和设置checked

attr()是针对所有属性，prop()是针对checked和selected等单一存在的，判断他们的true或者false。

find()是在子子孙孙中去查找

$(元素).each(){}--循环每个元素，可以这样用；循环一个数组，就要$.each(arry,function(){})。

代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()"/>
    <input type="button" value="反选" onclick="CheckReverse()"/>
    <input type="button" value="取消" onclick="CheckCancel()"/>
 
    <table border="1">
        <thead></thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td>11</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function CheckAll(){
            $('#tb1').find(':checkbox').prop('checked',true);
        }
        function CheckReverse(){
            $('#tb1').find(':checkbox').each(function(){
                //$(this)=每一个复选框
                //$(this).prop('checked')如果选中,true,否则false
                if ($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }
            });
        }
        function CheckCancel(){
            $('#tb1').find(':checkbox').prop('checked',false);
        }
    </script>
</body>
</html>
效果：​

​

jQuery--全选、反选、取消的更多相关文章

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

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

  2. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  3. jQuery全选/反选checkbox

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

  4. 关于JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...

  5. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  6. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  7. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  8. jquery实现全选 反选 取消

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

  9. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  10. jquery全选反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Servlet和JSP规范与Tomcat版本对应关系

    apache tomcat 官网地址:http://tomcat.apache.org/whichversion.html

  2. is is not == !=之间的区别

    简单来说,python中的is与is not运算符可判断两个对象是否为同一对象.若为同一个对象,则对象1 is 对象2为True .反正,若非同一个对象,则对象1 is not 对象2为True 要理 ...

  3. Spring按名称自动装配--byName

    在Spring中,“按名称自动装配”是指,如果一个bean的名称与其他bean属性的名称是一样的,那么将自动装配它. 例如,如果“customer” bean公开一个“address”属性,Sprin ...

  4. hadoop之 Zookeeper 分布式应用程序协调服务

    (1) Zookeeper 在 Hadoop 集群中的作用 Zookeeper 是分布式管理协作框架,Zookeeper 集群用来保证 Hadoop 集群的高可用,(高可用的含义是:集群中就算有一部分 ...

  5. html网页自动跳转页面代码

    方案一,用<meta>里直接写刷新语句: <html><head><meta http-equiv="Content-Language" ...

  6. delphi2010多线程编程教程

    多线程编程(1) - 先入门再说. 多线程应该是编程工作者的基础技能, 但这个基础对我来讲的确有点难(起码昨天以前是这样). 开始本应该是一篇洋洋洒洒的文字, 不过我还是提倡先做起来, 在尝试中去理解 ...

  7. mysql + keepalived架构

    mysql + keepalived架构 文档(这个文章共有三篇): http://blog.itpub.net/27000195/viewspace-1364706/

  8. HTML简历

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Java-Maven-Runoob：Maven Web 应用

    ylbtech-Java-Maven-Runoob:Maven Web 应用 1.返回顶部 1. Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的 ...

  10. C Primer Plus学习笔记（十）- 字符串和字符串函数

    getchar() 和 putchar() getchar() 函数不带任何参数,它从输入队列中返回下一个字符 下面的语句读取下一个字符输入,并把该字符的值赋给变量 ch ch =getchar(); ...