JSFiddle - React, Tailwind, and code Playground

by wales

HTML

<table id="vote-info" border=1 width=100%>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>1</td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" checked=checked>
        </td>
        <td>2</td>
        <td>
            <input type="checkbox">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>3</td>
        <td>
            <input type="checkbox" checked=checked>
        </td>
    </tr>
</table>

JavaScript

$(function () {

    $('td:first-child input').change(function () {
        $(this).closest('tr').toggleClass("highlight", this.checked);
        if ($(this).prop('checked')) {
            if ($(this).parents('tr').find('td:last-child input').prop('checked')) {
                $(this).parents('tr').css('background-color', 'red');
            } else {
                $(this).parents('tr').css('background-color', 'yellow');
            }
        } else {
            if (!$(this).parents('tr').find('td:last-child input').prop('checked')) $(this).parents('tr').css('background-color', '');
        }
    });

    $('td:last-child input').change(function () {
        $(this).closest('tr').toggleClass("highlight", this.checked);
        if ($(this).prop('checked')) {
            $(this).parents('tr').css('background-color', 'red');
        } else {
            if (!$(this).parents('tr').find('td:first-child input').prop('checked')) {
                $(this).parents('tr').css('background-color', '');
            } else {
                $(this).parents('tr').css('background-color', 'yellow');
            }
        }
    });

    $('#vote-info').find('td:first-child input').each(function (index) {
        if ($(this).prop('checked')) {
            if ($(this).parents('tr').find('td:last-child input').prop('checked')) {
                $(this).parents('tr').css('background-color', 'red');
            } else {
                if (!$(this).parents('tr').find('td:last-childinput').prop('checked')) $(this).parents('tr').css('background-color', 'yellow');
            }
        }
    });
    $('#vote-info').find('td:last-child input').each(function (index) {
        if ($(this).prop('checked')) {
            $(this).parents('tr').css('background-color', 'red');
        }
    });
});