zoukankan      html  css  js  c++  java
  • jQuery--全选、反选、取消

    主要知识点:

    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>
    效果:​
















  • 相关阅读:
    NSURLSession实现文件上传
    JS中如何判断null、undefined与NaN
    jquery
    url操作等
    设计模式
    javaScript类型转换
    jQuery.noop
    JavaScript严谨模式(Strict Mode)提升开发效率和质量
    Data URI
    e.target e.currenttarget
  • 原文地址:https://www.cnblogs.com/daliangtou/p/5205282.html
Copyright © 2011-2022 走看看