CODEWITHSUNDEEP
javascriptasp.netjquerycss-selectors
William
William

Reputation: 1467

Jquery checkboxes within containing table selector 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.

Upvotes: 1

Views: 1339

Answers (3)

user113716
user113716

Reputation: 322492

Change your inline attribute to this:

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

And your checkAll() to this:

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

Using .call(), it is called from the context of the element clicked.

Then the jQuery gets the closest()(docs) <table> and finds the inputs using the checkbox-selector(docs) and the enabled-selector(docs) .

Then when using the attr()(docs) method, you can use this.checked to set the checkboxes to the current state of the one checked.

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237865

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

Upvotes: 2

Rup
Rup

Reputation: 34408

You can find the table containing the select all using .closest

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

If there might be several nested tables it's often easiest to specify the one you want with a class, e.g. $(this).closest('table.tableOfCheckboxes'); where you add class tableOfCheckboxes to the table you want to find.

Upvotes: 0

Related Questions