Question

My current code:

<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);" />

The short version:

How do I modify the function call and method above to check all checkboxes inside a table containing the checxbox form element.

The long version:

I am creating a WebUserControl containing a grid view in asp.net that is going to have a delete option. I would like the delete to be a series of checkboxes with one a box in the header to select all of them. What this amounts to for non ASP.NET people is a table with a header row that has a checkbox and every row also has a checxbox.

I have used the above code to check all boxes on the entire page. That won’t work here though because I want to have multiple of these on the page at once each working independently. I know I could use a selector to select all the boxes if I ID’d the table but that would require some coding to name the table uniquely and then put that name in the script block.

Really what I would like is to modify the script above to check all checkboxes in the containing table of the “select all” box. The table containing the checkbox could be nested within others but I don’t see any being nested within it, or if there are and the nested table also contains checxboxes I don’t care if they also get selected.

Thanks for your help.

Answer 1

First, don’t mix your HTML and your Javascript. Use event handler binding instead.

Second, use closest to get the nearest ancestor element of a particular type:

$(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
    });
});