JSFiddle - React, Tailwind, and code Playground

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

.odd { background-color: #ccc; }
.even { background-color: #eee; }

.selected { background-color: #ffff00; }
.odd.selected { background-color: orange; }
.even.selected { background-color: pink; }

JavaScript

jQuery(function($) {
    
    $('tbody tr:odd').addClass('odd'); // TEMP
    $('tbody tr:even').addClass('even'); // TEMP
    
    
    $('tbody :checkbox').change(function() {
        $(this).closest('tr').toggleClass('selected', this.checked);
        
        var allChecked = $('tbody :checkbox:checked').length == $('tbody :checkbox').length;
        $('thead :checkbox').prop('checked', allChecked );
    
    });
    $('thead :checkbox').change(function() {
        $('tbody :checkbox').prop('checked', this.checked).trigger('change');
    });
});