JQuery To check all checkboxes in td based on classname of tr

Question

here is my sample code

<table id="accessListTable">
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="1"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="2"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
    <td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
    <td><input type="checkbox" id="4"/></td>
</tr>
</table>

1. E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
2. And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.

Please any help!

Answer 1

You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead

$(function ($) {
    $(".groupHeadCheck").on("click", function (event) {
        $(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
    })
});

Demo: Fiddle

Answer 2

I am sure it can be done in a prettier manner, but this is the basic idea:

$("table tbody").on("change", "input[type=checkbox]", function (e) {
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
        allCbs.prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
        master.prop("checked", allChecked);
    }
});

and if you need to run the code to force the check all state

$(".groupHead").next().find("[type=checkbox]").change();

JSFiddle

Answer 3

This would check all if the first is checked (or uncheck all)

$(document).on('click', '.groupHeadCheck',function() {
     $(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});   

you could fiddle a bit with your classes (or IDs) to make it right for you

Answer 4

I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.

You could use the class name to apply the same logic.

First, here is what a check all checkbox looked like:

    <td>
        <input type="checkbox" onchange="checkAll(this, 'S_');" />
   </td>

Then the javascript function it calls when clicked:

function checkAll(sender, match)
{
    var table = $(sender).closest('table').get(0);
    var selector = "input[type='checkbox'][name^='" + match + "']";

    for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
    {
        var cb = $(table.rows[i]).find(selector).get(0);
        if (cb === undefined)
            break;

        if ($(cb).is(':enabled'))
           cb.checked = sender.checked;

    }
}

So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.