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

发表评论

发表评论

沙发空缺中,还不快抢~