JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<table>
<tr class="record">
    <td>
        <input type="checkbox" name="myRecords[]" value="ID" />
    </td>
</tr>
</table>

CSS

tr{
    background:teal;
    padding:5px;
    width:200px;
    display:block;
}

JavaScript

function checkBox(ID) {
    // move this listener outside so it does not require a click to activate
    $(document).on("click",'input#myRecords'+ID, function(e){
        e.stopPropagation();
    });
    $(document).on("click",'#record'+ID,function(){
        var ischecked = $('input#myRecords'+ID).is(":checked");
        if(ischecked) {
            $('input#myRecords'+ID).prop('checked', false);
        } else {
            $('input#myRecords'+ID).prop('checked', true)
        }
    });
};
checkBox('ID'); // activates listeners