JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" />
<input type="checkbox" id="chk3" />
<input type="checkbox" id="chk4" />
    <span></span>
</form>

JavaScript

var mousedownOn = {
        id: '',
        checkState: false
    };

$(document)
    .mouseup(function() {
        mousedownOn.id = '';
    });
    
$('input[type="checkbox"]')
    .mousedown(function() {
        var $this = $(this);
        mousedownOn.id = $this.attr('id');
        mousedownOn.checkState = $this.prop('checked');
        $this.prop('checked',!$this.prop('checked'));
    })
    .mouseenter(function() {
        var $this = $(this);
        
        if (mousedownOn.id != '' && mousedownOn.id != $this.attr('id')){
            $this.prop('checked',!mousedownOn.checkState);
        }
    })
    .click(function(e) {
        e.preventDefault();
        return false;
    });