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
















  • 相关阅读:
    c#_表单处理方式
    C#_在.net中序列化读写xml方法的总结
    Jquery_异步上传文件多种方式归纳
    C#_Jquery无刷新上传
    构造方法的作用
    ssh项目问题01,为创建数据库抛出的异常
    成员方法的使用及其调用
    静态页面的使用和操作
    oa项目环境搭建的操作步骤详解
    写做顺序
  • 原文地址:https://www.cnblogs.com/daliangtou/p/5205282.html
Copyright © 2020-2023  润新知