JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="mycheck" />
<br />
<span id="actual-value-inevent"></span>
<br />
<span id="actual-value"></span>
<br />
<button id="view-value">view value</button>
<br />
<button id="call-trigger">call trigger</button>
<br />
<button id="call-trigger-handler">call trigger handler</button>

JavaScript

$('#mycheck').bind('click', function(ev) {
    $('#actual-value-inevent').html('value in event : ' + $(this).is(':checked'));
});

$('#view-value').bind('click', function(ev) {
    $('#actual-value').html('value view : ' + $('#mycheck').is(':checked'));
});
    
$('#call-trigger').bind('click', function(ev) {
    $('#mycheck').trigger('click');
    $('#actual-value').html('value post trigger: ' + $('#mycheck').is(':checked'));
});

$('#call-trigger-handler').bind('click', function(ev) {
    
    $('#mycheck')[0].checked = !$( "input" )[ 0 ].checked;
    $('#mycheck').triggerHandler('click');
    
    $('#actual-value').html('value post triggerHandler: ' + $('#mycheck').is(':checked'));
    
});