JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox"><br />
<a id="a1" href="#">toggle (intuitive way, doesn't work)</a><br />
<a id="a2" href="#">toggle (long way, works)</a><br />
<div id="console"> </div>

JavaScript

$(':checkbox').click(function() {
    if ($(this).is(':checked')) {
        $('div').html('checked').show().delay(300).fadeOut('fast')
    } else {
        $('div').html('unchecked').show().delay(300).fadeOut('fast')
    }
});


$('#a1').click(function() {
    $(':checkbox').click();
});


$('#a2').click(function() {
    if ($(':checkbox').is(':checked')) {
        $(':checkbox').removeAttr('checked').click().removeAttr('checked');
    } else {
        $(':checkbox').attr('checked', 'checked').click().attr('checked', 'checked');
    }
});