Selecting/Unselecting checkboxes by holding down the mouse button

Question

I have a group of checkboxes that I would like to be checked or unchecked (if checked) when you select it with a mouse. I don't mean any ordinary type of select, I mean, select the checkboxes that are in the selected area of the mouse button being held down while you move over the checkboxes/labels.

I have trouble explaining this, so I made an image example.

So if I had a group of checkboxes/labels like this:

<input type="checkbox" id="i1"/><label for="i1">Jun 23 2012</label>
<input type="checkbox" id="i1"/><label for="i1">Jun 24 2012</label>
<input type="checkbox" id="i1"/><label for="i1">Jun 25 2012</label>
<input type="checkbox" id="i1"/><label for="i1">Jun 26 2012</label>

How do I do this?

I tried looking on google, but found nothing. Any assistance is appreciated. Thanks.

Answer 1

You better use

<select size=5 multiple>

Regards.

Answer 2

Try warpping the content in parent div.Then try:

$("#test").selectable({
filter:'label',
stop: function() {        
    $("input").attr('checked',false);
    $(".ui-selected input", this).each(function() {

        this.checked= true;

    });
}
});

Working Fiddle