JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

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

CSS

inp

JavaScript

//check checkbox with drag
var mouseIsDown;

$(document).on('mousedown', function() {    
    mouseIsDown = true;
});

$(document).on('mouseup', function() {
    mouseIsDown = false;
});

$('input').on('mouseenter', function() {
    
    if(mouseIsDown) {
	if($(this).is(':checked'))
  		{
			$(this).removeAttr('checked');
  		}
  		else
  		{
  			$(this).attr('checked', true);
  		}
    }
});