user2818430 user2818430 - 14 days ago 4
Javascript Question

jquery select next tbody all rows

I have the following table:

jsfiddle



<table class="js-table-sections js-table-checkable table table-hover">
<thead>
<tr>
<th class="text-center" style="width: 70px;">
<label class="css-input css-checkbox css-checkbox-primary remove-margin-t remove-margin-b">
<input type="checkbox" id="check-all" name="check-all"><span></span>
</label>
</th>
<th style="width: 30px;"></th>
<th>Name</th>
<th style="width: 15%;">Access</th>
<th class="hidden-xs" style="width: 15%;">Date</th>
</tr>
</thead>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Jhon Smith</td>
<td>
<span class="label label-danger">Disabled</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 17, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $54,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 6, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 8, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $86,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 1, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Donald Barnes</td>
<td>
<span class="label label-primary">Personal</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 20, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $87,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 18, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $28,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 21, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $29,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Susan Elliott</td>
<td>
<span class="label label-warning">Trial</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 6, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $41,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 26, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $20,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 23, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $74,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 14, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $40,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 12, 2015 12:16</small>
</td>
</tr>
</tbody>
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Amy Hunter</td>
<td>
<span class="label label-success">VIP</span>
</td>
<td class="hidden-xs">
<em class="text-muted">June 22, 2015 12:16</em>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $32,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 11, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $37,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 3, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $66,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 4, 2015 12:16</small>
</td>
</tr>
<tr>
<td class="text-center">
<label class="css-input css-checkbox css-checkbox-primary">
<input type="checkbox" id="row_2" name="row_2"><span></span>
</label>
</td>
<td class="text-center"></td>
<td class="font-w600 text-success">+ $76,00</td>
<td>
<small>Paypal</small>
</td>
<td class="hidden-xs">
<small class="text-muted">June 2, 2015 12:16</small>
</td>
</tr>
</tbody>

</table>





The table has multiple tbody. One tbody is the header and next tbody contains the data rows. The header tbody has a class: js-table-sections-header. How can I check all the rows from the tbody which is under the header tbody using jquery?

Like in the image bellow:

enter image description here

The header tbody contains the name like: Jhon Smith, etc. When i click the check box from that row I want all other rows from under that to be checked.

Answer

I got the results with this jquery code:

$(document).ready(function () {
    $('input[class*="select-all"]').change(function () {
        var this_tbody = $(this).closest('tbody');

        $(this_tbody).next().find('input').prop('checked', $(this).is(':checked'));
    });

    $('#check-all').change(function () {
        $(this).closest('table').find('input').prop('checked', $(this).is(':checked'));
    });
});

Remember to set the class of the checkbox for the names (Donald Barnes, etc) to class="select-all".

Comments