Geek Answers Handbook

JQuery - select all Checkbox checkboxes only in the current table

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

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

I can select ALL checkboxes in one pass 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 on the first row).

thanks

EDIT .... sorry forgot to mention that we are on 1.26 jQuery and are not sure that I am allowed to lift us at all. This means that the "closest" does not exist.

+5
5

-

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

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

});

, ( , ). /edit URL-,

EDIT:

jQuery 1.2.6, parents() closest()

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

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

});
+13

, " ", ? .checkall? ():

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

, .checkall, :

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

", .storecheckbox..."

+5

Here is a snippet that should work according to your current page design.

// 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;
        });
    });
});
+2
source 
$(this).closest("table").find("input:checkbox")

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

0
source

// 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
source

More articles:


All Articles