JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th><input id="chkHeader" type="checkbox" /></th>
            <td>desc</td>
        </tr>
    </thead>
    <tr>
        <td><input type="checkbox" class="foo" /></td>
        <td>line 1</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="foo" /></td>
        <td>line 2</td>
    </tr>
</table>

CSS

table{
    border-collapse: collapse;
}

JavaScript

$(function () {    
    $('#chkHeader').change(function () {
        $('.foo').prop("checked", $(this).is(':checked'));
        $('.foo').triggerHandler("change");
    });
    
    $('.foo').on("change", function() {
        $(this).closest("tr").children("td").css({
            "background-color": "green",
            "color": "white",
        });
    });
});