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中网格视图的WebUserControl，它将具有删除选项。我希望删除是一系列复选框，标题中有一个框可以选择所有这些复选框。对于非ASP.NET用户来说，这相当于一个带有标题行的表，该行有一个复选框，每行也有一个checxbox。

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

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

感谢您的帮助。

Answer 1

首先，不要混淆HTML和Javascript。改为使用事件处理程序绑定。

其次，使用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
    });
});

Answer 2

将您的内联属性更改为：

<input type="checkbox" id="cbxSelectAll" onclick="checkAll.call(this);" />

你的checkAll()对此：

function checkAll() {
    $(this).closest('table').find("input:checkbox:enabled").attr('checked', this.checked);
}

使用.call()，从单击元素的上下文中调用它。

然后jQuery获取closest()^(docs) <table>并使用checkbox-selector^(docs)和enabled-selector^(docs)查找输入。

然后，当使用attr()^(docs)方法时，您可以使用this.checked将复选框设置为所选方案的当前状态。

Answer 3

您可以使用.closest

找到包含全部选择的表格

function checkAll(checked) {
    var $table = $(this).closest('table');
    $table.find("input[type='checkbox']:not([disabled='disabled'])")
          .attr('checked', checked);
}

如果可能有多个嵌套表，通常最容易用类指定所需的表，例如$(this).closest('table.tableOfCheckboxes');您将类tableOfCheckbox添加到要查找的表中。

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

3 个答案: