JQuery - Select All CheckBoxes within current table only

Question

Hi all,

I have two nested repeaters in C#. The outer has some grouping information and the inner has a table with X number of checkboxes.

So I will have Y number of tables. At the top of each table there will be a check box (as well as a checkbox on each row). What I want to do is be able to select all check boxes in a single table from the checkbox at the top of each table.

I can select ALL checkboxes in one go as follows:

$(document).ready(function() {
        $("#checkboxflipflop").click(function() {
            var checked_status = this.checked;
            $(".storecheckbox input").each(function() {
                this.checked = checked_status;
            });
        });
    });

I just can't figure out how to narrow the selection to the current table, (the checkbox at the top of each table is in the th row).

Thanks

EDIT.... sorry forgot to mention that we are on 1.26 of JQuery and not sure if I am allowed to move us up at all. Which means "closest" is not there.

Answer 1

$(this).closest("table").find("input:checkbox")

Note: It seems that all the select-all-in-this-table-checkboxes have the same id, the id should be unique within the page, you should use a class instead. (Or just table th input)

Answer 2

So each table has a "check all" checkbox, right? Why not give it a class of .checkall? Then you could do this (untested):

$('.checkall').click(function(){
  var checked_status = this.checked;
  $(this).closest('table').find('input:checkbox').each(function(){
    this.checked = checked_status;
  });
})

Alternately, if you don't want to use the .checkall class, you use a selector like:

$('.storecheckbox input:nth-child(1)').click`

Meaning, "when the first input inside an element with class .storecheckbox is clicked..."

Answer 3

Something like the following ought to do it

$('th input:checkbox').click(function(e) {

var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);

});

Here's a Working Demo with two tables nested in another table (semantically horrible I'll admit). Add /edit to the URL to see the code

EDIT:

Since you're still using jQuery 1.2.6, use parents() instead of closest()

$('th input:checkbox').click(function(e) {

var table = $(e.target).parents('table:first');
$('td input:checkbox', table).attr('checked', e.target.checked);

});

Answer 4

Here's the snippet that should work as per your current design of the page.

// iterate over all the tables in the page
$("table").each(function() {
    // attach a click event on the checkbox in the header in each of table
    $(this).find("th:first input:checkbox").click(function() {
        var val = this.checked;
        // when clicked on a particular header, get the reference of the table & hence all the rows in that table, iterate over each of them.
        $(this).parents("table").find("tr").each(function() {
            // access the checkbox in the first column, and updates its value.
            $(this).find("td:first input:checkbox")[0].checked = val;
        });
    });
});