Question

I have a table where each row has some data and the user can submit all rows or single row or some rows. So, every row has a checkbox now and If the user checks the checkbox the background colour of this row should be changed(I have implemented this using jquery). Now there is another checkbox to select All these checkboxes, I have implemented this too with jquery. Now the issue is that when I selectAll checkboxes the row background-colour doesnot change , but when I check individual rows it gets changed. Being a novice coder I can understand that click event is not happening so the background colour is not changing. So I have used change event instead of click , but it’s still the same. The functions for select All and row background colour change are working good but individually. Need help regarding this…

Thanks in advance,
NoviceCoder.

Answer 1

Without any of your code I tried something. See if you can apply to your code. (working example)

HTML

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="selectAll" id="selectAll" /></th>
            <th>Row name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 4</td>
        </tr>
    </tbody>
</table>

CSS

.selected { background-color: #ffff00; }

Javascript

jQuery(function($) {
    $('tbody :checkbox').change(function() {
        $(this).closest('tr').toggleClass('selected', this.checked);
    });
    $('thead :checkbox').change(function() {
        $('tbody :checkbox').prop('checked', this.checked).trigger('change');
    });
});