温馨提示
  • 欢迎您光临共享屋素材网,本站所有资源均来自网络或用户自主上传,本站所有素材仅交流学习用途,请勿商用。
  • 通过对checkbox的全选与反选理解jQuery中$(this)与this的区别

    离下班还有半小时,介绍一点小功能,也就是复选框的全选和反选功能,很简单,上代码:

    HTML部分

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
        <body>
            <table border="1">
                <tr>
                    <th>
                        <input type="checkbox" id="che">
                    </th>
                    <th>
                        姓名
                    </th>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="uid">
                    </td>
                    <td>
                        Tom
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="uid">
                    </td>
                    <td>
                        Eve
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="uid">
                    </td>
                    <td>
                        Charlie
                    </td>
                </tr>
            </table>
        </body>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </html>
    

    js部分

    如果仅仅是全选和全不选

    <script>
        $('#che').click(function(){
            $(".uid").prop("checked", this.checked);
    </script>
    

    解释下上述代码,就是让所有class为uid的元素的checked属性都更改为id为che的元素的checked属性值,换句话说就是id=”che”的checked属性值是什么,class=”uid”的元素的checked值就跟着改变。代码中prop方法的功能类似于attr方法,二者的区别在官方文档中是这样说明的:prop() 方法应该用于检索属性值,例如 DOM 属性,如需检索 HTML 属性,请使用attr() 方法代替。代码中this.checked,就是当前id为che的checkbox当前checked值。

    而如果是在此基础上加上反选功能,那么代码是下面的样子

    <script>
        $('#che').click(function(){
            $('.uid').each(function(){
                if($(this).prop('checked') == true){
                    $(this).prop("checked", false);
                }else{
                    $(this).prop("checked", true);
                }
            })
        })
    </script>
    

    很简单,就是遍历每个元素,判断布尔值取反就行了。

    关于$(this)与this的区别

    上边的第一段js代码使用了this.checked,这里的this代表html中的一个元素,即che。第二段js代码使用了$(this).prop,这里的$(this)是一个jQuery对象,而jQuery对象没有checked属性,但jQuery拥有prop()方法可以get/set DOM对象的属性,因此正确写法是$(this).prop(“checked”,true)。到这里应该比较清楚二者的使用方法了吧。

    登录开启无限免费下载