[ACCEPTED]-JQuery - Select All CheckBoxes within current table only-jquery

Something like the following ought to do 4 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 3 table (semantically horrible I'll admit). Add /edit to the URL to see the code

EDIT: 2

Since you're still using jQuery 1.2.6, use 1 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);

});

So each table has a "check all" checkbox, right? Why 5 not give it a class of .checkall? Then you could 4 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 3 want to use the .checkall class, you use a selector 2 like:

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

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

Here's the snippet that should work as per 1 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;
        });
    });
});

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

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

// This works for me

    <thead>
    <tr>
        <th><asp:CheckBox ID="chkHeader" runat="server" Visible="false" /></th>
    </tr>
    </thead>

    <ItemTemplate>
    <tr>
        <td>
            <asp:CheckBox ID="chkRow" runat="server" Visible="false" onclick="handleClick(this);"/>
            <asp:CheckBox ID="chkForDisplayGrayed" runat="server" Visible="false"/>
        </td>

    </tr>
    </ItemTemplate>


<script type="text/javascript">
    $(document).ready(function () {
    var result = $('#tableEmployeeRecords').dataTable({
        "oLanguage": {
            "sSearch": "Filter: ",
            "sEmptyTable": "No results found."
        },
        "columnDefs": [{
            // Set column 0 to non sortable, checkbox hearder is placed
            "targets": [0],
            "orderable": false
        }],
        "order": [[1, "asc"]]
    });
    // Check Uncheck Select All 
        $('table [id*=chkHeader]').click(function () {
            if ($(this).is(':checked')) {
                $('table [id*=chkRow]').prop('checked', true);
            }
            else {
                $('table [id*=chkRow]').prop('checked', false);
            }
        });
    });
    // Check Uncheck Row items and Select All 
        function handleClick(cb)
        {
            var totalRow = $('table [id*=chkRow]').length; 
            var checkSelected = $('table [id*=chkRow]:checked').length;

            if (checkSelected == totalRow )
                $("#tableEmployeeRecords [id*=chkHeader]").prop("checked", true);
            else
                $("#tableEmployeeRecords [id*=chkHeader]").removeAttr("checked");
        }
</script>   

0