JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 450px;">
    <tbody>
        <tr>
            <td style="width:50px;"><input type="checkbox" id="test" /></td>
            <td>I Am going to click this TD to check the checkbox</td>
        </tr>
    </tbody>
</table>

JavaScript

$('#test').click(function() {
    alert($(this).is(':checked'));
});

$('table tbody tr').click(function(e) {
    if (e.target.type !== 'checkbox')
        $(':checkbox', this).trigger('click'); 
});

/*
    Click on the checkbox >>> The result is as expected
    Click on the tr >>> The result is inverted
    _______________________________________________
    | checkbox status | checkbox click | tr click |
    -----------------------------------------------
    |     true        |     true       |   false  |
    |     false       |     false      |   true   |
    -----------------------------------------------
    
Observation: When the user actually click on the checkbox, the value changes then the events are triggered. But when 'trigger' is called, the events are triggered and the value is changed after the events are done.
*/