swipe-select checkboxes

by Deborah

HTML

<form>
<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" />
</form>

CSS

form {
   padding: 2em;
    width: 1em;
}

input {
    margin: 5px 0;
}

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);
        }
    } else {
        //do nothing
    }
});