jquery - 检查 jQuery 中的所有复选框

Question

我有一个这样的表设置:

<table>
    <thead>
        <th>
            <input type="checkbox" class="check-all" />
        </th>
        <th>
            Title
        </th>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 2</td>
        </tr>
    </tbody>
</table>

我试图拥有它，因此当选中标题中带有“check-all”类的复选框时，它会检查下面的所有复选框。

这就是我所拥有的，但它似乎不起作用

        $('.check-all').click(
        function(){
            $(this).parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
        }
    )

有什么想法吗？谢谢!

Answer 1

首先你应该使用jQuery.closest()找到最接近的表格标签。

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").attr('checked', this.checked);   
 });

第二。如果您使用 jQuery 1.6 或更高版本，您应该使用 jQuery.prop()

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").prop('checked', this.checked);   
 });

最后，对于全选框中的 bool 值，您不需要 jQuery 对象，您可以简单地使用 HTML DOM this.checked