JSFiddle - React, Tailwind, and code Playground

HTML

<input id="chk1" type="checkbox" /><span>chk1 (initially checked)</span><br />
<input id="chk2" type="checkbox" /><span>chk2 (initially unchecked)</span><br />

<br />

<div id="debug">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Event&nbsp;Indet.&nbsp;Checked</div>

CSS

body {
    font-family:sans-serif;
    margin:10px;
}

#debug {
    font-family:'consolas', monospace;
    white-space: pre;
}

JavaScript

function debugMsg(element, str) {
    $("#debug").append("\n[" + element.id + "] " + str);
};

$(function() {
    $("#chk1")[0].indeterminate = true;
    $("#chk1")[0].checked = true;
    
    $("#chk2")[0].indeterminate = true;
    
    $("input").each(
        function(ix,el) { 
            
            // use pure-JS handlers
            
            el.addEventListener('mouseup', function() {
                debugMsg(this, "msup: " + this.indeterminate + ",  " + this.checked);
            });
            el.addEventListener('keyup', function() {
                debugMsg(this, "kyup: " + this.indeterminate + ",  " + this.checked);
            });
            el.addEventListener('click', function() {
                debugMsg(this, "clik: " + this.indeterminate + ",  " + this.checked);
            });
            el.addEventListener('blur', function() {
                debugMsg(this, "blur: " + this.indeterminate + ",  " + this.checked);
            });
            el.addEventListener('change', function() {
                debugMsg(this, "chng: " + this.indeterminate + ",  " + this.checked);
            });
            
            debugMsg(el, "init: " + this.indeterminate + ",  " + this.checked);
        }
    );
    
});