JSFiddle - React, Tailwind, and code Playground

by djwave28

HTML

<table>
    <tr id="recordID1">
        <!-- remove the onclick, you are already listening for it -->
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID1" value="ID" />
        </td>
    </tr>
    <tr id="recordID2">
        <!-- remove the onclick, you are already listening for it -->
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID2" value="ID" />
        </td>
    </tr>
</table>

CSS

tr {
    background:teal;
    padding:5px;
    width:200px;
    display:block;
    border: 1px solid #000;
}

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('ID1'); // activates listeners