JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<table id="emp_grid">
    <tbody>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>
                Cell 1
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>
                Cell 2
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>
                Cell 3
            </td>
        </tr>
    </tbody>
</table>

CSS

.selected{
    font-weight:bold;
}

JavaScript

$("#emp_grid tbody tr").click(function(e) {
    $("#emp_grid tbody tr").removeClass("selected");
    var $checkbox = $(this).find(':checkbox');
    $("#emp_grid :checkbox").not($checkbox).removeAttr("checked");
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
        $(this).filter(':has(:checkbox)').toggleClass('selected', $checkbox.attr('checked'));
    } else {

        
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $(this).filter(':has(:checkbox)').toggleClass('selected', $checkbox.attr('checked'));
    }
});