JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</form>

JavaScript

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

$('input[type="checkbox"]').mouseenter(function() {
    if(mouseDown){
    if ($(this).is(':checked')) {
        $(this).prop('checked',false);
    } else {
         $(this).prop('checked',true);
    }
}
});
$('input[type="checkbox"]').mousedown(function() {
    
    if ($(this).is(':checked')) {
        $(this).prop('checked',false);
    } else {
         $(this).prop('checked',true);
    }

});