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
















  • 相关阅读:
    1393 0和1相等串 鸽笼原理 || 化简dp公式
    C. Coin Troubles 有依赖的背包 + 完全背包变形
    D. PolandBall and Polygon BIT + 欧拉公式
    51NOD 1639 绑鞋带 数学
    D. Fedor and coupons 二分暴力
    hdu 4104 Discount
    bnu 51640 Training Plan DP
    hdu 5745 La Vie en rose DP + bitset优化
    hdu 5036 Explosion bitset优化floyd
    1354 选数字 DP背包 + 数学剪枝
  • 原文地址:https://www.cnblogs.com/daliangtou/p/5205282.html
Copyright © 2011-2022 走看看