JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="tristate" value="0"/>
<input type="checkbox" class="tristate" value="1"/>
<input type="checkbox" class="tristate" value="2"/>

JavaScript

$(function() {                                                  // On DOM ready
    $('.tristate').each(function() {                            // pick every tristate class element
        renderTriStateCheckbox($(this));                        // and render it.
    }).bind(($.browser.msie ? 'click' : 'change'), function() { // On click or change
        var $el = $(this);                                      // get element,
        var val = $el.val();                                    // get element's value,
        $el.val(val == '0' ? '1' : (val == '1' ? '2' : '0'));   // increment or reset the value
        renderTriStateCheckbox($el);                            // and render it.
    });
});

function renderTriStateCheckbox($el) {
    switch ($el.val()) {                                        // Get element’s value.
    case '0':                                                   // If value is '0',
        $el.removeAttr('checked').prop('indeterminate', false); // paint empty.
        break;
    case '1':                                                   // If value is '1',
        $el.attr('checked', 'checked');                         // paint checked.
        break;
    case '2':                                                   // If value is '2'
        $el.prop('indeterminate', true);                        // paint indeterminate.
        break;
    }
}