主要知识点：

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. 51nod 2006 飞行员配对

    第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2名飞行员,其中1名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中, ...

  2. 【策略】一致性Hash算法（Hash环）的java代码实现

    [一]一致性hash算法,基本实现分布平衡. package org.ehking.quartz.curator; import java.util.SortedMap; import java.ut ...

  3. 前阿里DT总监欧吉良猝死:一代大神勾践陨落滴滴

    欧吉良 阿里巴巴集团数据技术及产品部(DT)总监,淘宝网&天猫BI团队负责人,集团数据委员会数据运营组组长,阿里数据大学校长:2007年7月正式加入阿里,先后在支付宝.天猫.淘宝.数据技术及产 ...

  4. ZenCoding[Emmet]語法簡介【轉】

    快速指南 下面是一些常用的Zen Coding功能,目前VS2013的Web Essentials插件已经支持. '#' 创建一个id特性 '.' 创建一个类特性 '[]' 创建一个自定义特性 '&g ...

  5. 使用ajax提交form表单，formData

    http://www.cnblogs.com/zhuxiaojie/p/4783939.html formDatahttps://developer.mozilla.org/zh-CN/docs/We ...

  6. rbenv配置

    git clone https://github.com/rbenv/rbenv.git ~/.rbenv # 用来编译安装 ruby git clone git://github.com/sstep ...

  7. FPGA论剑（续）

    25年之后,第二次华山论剑之时,天下第一的王重阳已然仙逝,郭靖少年英杰刚过二十岁,接东邪黄药师.北丐洪七公300招不败,二人默认郭靖天下第一.南帝段智兴因为出家,法号“一灯”,早已看破名利,故没有参加 ...

  8. Java [parms/options] range -b 100 -c 10 -i 100 -t 300 -s 180

    3 down vote Just run the command java -X and you will get ans of all_ C:\Users\Admin>java -X -Xmi ...

  9. 微信官方jssdk Demo

    1.html部分 <!DOCTYPE html> <!-- saved from url=(0028){sh:$selfUrl} --> <html><hea ...

  10. Zabbix自定义监控网站服务是否能够正常响应

     监测tcp连接数文件名: /etc/zabbix/zabbix_agentd.conf.d/count_tcp.conf UserParameter=count.tcp,netstat -s|g ...