通过对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)。到这里应该比较清楚二者的使用方法了吧。

原创文章转载请注明：转载自：通过对checkbox的全选与反选理解jQuery中$(this)与this的区别