JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
    <table class="table" border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" /></td>
            <td>1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>2</td>
        </tr>
        <tr>
            <td><input type="radio" /></td>
            <td>3</td>
        </tr>
    </table>
</div>

CSS

.active{
    background:#EEE;
}
.table{
    width:400px;
}

JavaScript

$('.product .table tr').click(function(event) {
    if (event.target.type !== 'checkbox' && event.target.type !== 'radio') {
        $('.product .table tr').removeClass('active');
        $(this).addClass('active');
        $(this).find(':checkbox, :radio').prop('checked',true);
    }    
});
$(':checkbox,:radio').change(function(event) {
    $('.product .table tr').removeClass('active');
    if(this.checked){
        $(this).closest('tr').addClass('active');
    }
});