mercredi 22 mars 2017

change multiple table row class on click of (selectall) checkbox

I have a table that has multiple rows and I want to add and remove a class to the tr for each row when a select all check box is clicked

I want to change all the tr class rows at once (add and remove the tr class) when the select all checkbox is clicked. I have the following javascript that works to select all checkboxs when the top checkbox is clicked and it changes a single row class when a checkbox within a tr row is clicked

I need the function of when clicking the top checkbox all the checkboxs are selected and also the tr class's in the table rows are changed as well at the same time, just like the highlight row javascript below

this is my javascript for the checkbox that when clicked selects all the other checkboxs

it also highlights a table row when a single checkbox is clicked

<script type="text/javascript">
$(function () {
    $('.chk_boxes').click(function () {
        $('.chk_boxes1').prop('checked', this.checked);
    });

    // Highlight row when checkbox is checked
    $('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function () {
        if ($(this).is(':checked')) {
            $(this).parents('tr').addClass('warning');
        }
        else {
            $(this).parents('tr').removeClass('warning');
        }
    });
});

and the following html table

<div class="btn-group navbar-btn pl-20">
    <input class="chk_boxes" type="checkbox">
</div>

<div class="btn-group navbar-btn">
    <button type="submit" onclick="return confirm('Are you sure you want to delete the messages?');" class="btn btn-default"><span class="position-right">Delete</span></button>
</div>

<table>
<tbody>

    <tr class="">
        <td class="table-inbox-checkbox">
            <div class="checker"><span><input class="chk_boxes1" value="5" name="id[]" type="checkbox"></span></div>
        </td>
        <td class="table-inbox-image">
            <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
            </span>
        </td>
        <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user3</div></a></td>
        <td class="table-inbox-message">
            <div class="table-inbox-subject"> <a href="#" class="text-primary">message number 1</a></div>
            <span class="table-inbox-preview">hi are you ok for a something</span>
        </td>
        <td class="table-inbox-attachment"></td>
        <td class="table-inbox-time"> 21st Mar, 20:04 </td>
    </tr>

    <tr class="">
        <td class="table-inbox-checkbox rowlink-skip">
            <div class="checker"><span><input class="chk_boxes1" value="6" name="id[]" type="checkbox"></span></div>
        </td>
        <td class="table-inbox-image">
            <span class="btn bg-t btn-rounded btn-icon btn-xs">
                <span class="letter-icon">T</span>
            </span>
        </td>
        <td class="table-inbox-name"><a href="#"><div class="letter-icon-title">test user5</div></a></td>
        <td class="table-inbox-message">
            <div class="table-inbox-subject"> <a href="#" class="text-primary">Message number 2</a></div>
            <span class="table-inbox-preview">i am sending this message to you</span>
        </td>
        <td class="table-inbox-attachment"></td>
        <td class="table-inbox-time"> 20st Mar, 21:04 </td>
    </tr>

</tbody>
</table>




Aucun commentaire:

Enregistrer un commentaire