JSFiddle - React, Tailwind, and code Playground

HTML

<input class='user_roles' id="chk" type=checkbox></input>
<input id="btn_on" type="button" value="on" />
<input id="btn_off" type="button" value="off" />

JavaScript

function alertState(el){
   if(el.prop("checked") === true) {
        alert ("checked");   
    }
    else{
        alert ("not checked");
    }
}
$('#chk').click(function() {
    alertState($(this));
});

        $("[id$=btn_on]").click(function () {
            $('#chk').prop('checked', true);
            alertState($('#chk'));
        });
                                
        $("[id$=btn_off]").click(function () {
                $('#chk').removeProp('checked');
            alertState($('#chk'));
        });