javascript - 包含表选择器问题的 Jquery 复选框

Question

我当前的代码:

<script type="text/javascript">
    function checkAll(checked) {
        $("input[type='checkbox']:not([disabled='disabled'])").attr('checked', checked);
    }
</script>
<input type="checkbox" id="cbxSelectAll" onclick="checkAll(this.checked);" />

简短版:

我如何修改上面的函数调用和方法以选中包含 checxbox 表单元素的表中的所有复选框。

长版:

我正在 asp.net 中创建一个包含 GridView 的 WebUserControl，它将有一个删除选项。我希望删除是一系列复选框，标题中有一个框可以选择所有复选框。对于非 ASP.NET 用户来说，这相当于一个表，表头行有一个复选框，每一行也有一个 checxbox。

我已经使用上面的代码选中了整个页面上的所有框。但这在这里行不通，因为我想在页面上同时拥有多个，每个独立工作。我知道我可以使用选择器来选择所有框，如果我对表格进行了 ID，但这将需要一些编码来唯一地命名表格，然后将该名称放入脚本 block 中。

我真正想要的是修改上面的脚本以选中“全选”框的包含表中的所有复选框。包含复选框的表可以嵌套在其他表中，但我没有看到任何嵌套在其中，或者如果有并且嵌套表也包含 checxboxes 我不在乎它们是否也被选中。

感谢您的帮助。

Answer 1

首先，不要混合使用 HTML 和 Javascript。请改用事件处理程序绑定(bind)。

其次，使用closest获取特定类型的最近祖先元素:

$(document).ready(function(){
    $('#cbxSelectAll').click(function() {
        $(this)
            .closest('table') // get the parent table element
            .find("input:checkbox:enabled") // find children that match the selector
            .attr('checked', this.checked); // set their checked value
    });
});