JSFiddle - React, Tailwind, and code Playground

HTML

<form id="the-form">
    <input type="checkbox" name="cb1" class="tristate-checkbox" />
    <input type="checkbox" name="cb2" value='0' data-checked='0' checked="false" class="tristate-checkbox" />
    <input type="checkbox" name="cb3" class="tristate-checkbox" checked="checked" />
</form>
<br>
<div id="res">
     <h3>Result:</h3>
    <p></p>
</div>

CSS

* {
    font-family: sans-serif;
}
#res {
    padding: 20px;
}

JavaScript

var inputs = $('.tristate-checkbox'),
    el;

var res = $('#the-form').serialize();
$("#res p").html(res)

inputs.on('click.tristate', function () {
    el = $(this);
    switch (el.data('checked')) {

        // unchecked, going indeterminate
        case -1:
            el.data('checked', 0);
            el.val(0) // so it will send the value
            el.prop('indeterminate', true);
            break;

            // indeterminate, going checked
        case 0:
            el.data('checked', 1);
            el.val(1);
            el.prop('indeterminate', false);
            el.prop('checked', true);
            break;

            // checked, going unchecked
        default:
            el.data('checked', -1);
            el.prop('indeterminate', false);
            el.prop('checked', false);
    }

    var res = $('#the-form').serialize();
    $("#res p").html(res);
});