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?

example

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

Something like this -> http://stackoverflow.com/questions/9692633/jquery-select-multiple-checkboxes-with-selectable — bobbykolev, Jan 22 '14 at 13:23

score 1 · Answer 1 · answered Jan 22 '14 at 13:23

1

You better use

<select size=5 multiple>

Regards.

answered Jan 22 '14 at 13:23

Grim

1,938
10
56
123

I guess I could, if I wanted my page to look hideous. Thanks though :) – Control Freak Jan 22 '14 at 13:37

score 1 · Accepted Answer · answered Jan 22 '14 at 13:28

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

Selecting/Unselecting checkboxes by holding down the mouse button

2 Answers2