Checkboxes in jQuery

Question

I want to make multiple checkboxes to be "checked" with mouse click-and-drag. It works with my script:

var $j = jQuery.noConflict();
$j(window).load(function () {
    $j(".filterset").selectable({
        filter: 'label',
        stop: function () {
            $j(".ui-selected input", this).each(function () {
                this.checked = !this.checked
            });
        }
    });
});

JsFiddle

But it works only when you click and drag on the "labels" but not on the checkbox itself. How to modify the javascript, to get this work?

Answer 1

Figure this out... I saw that you already had a padding for each of the labels that overlapped onto the checkbox, so in theory it should've worked. The only issue was that the checkbox was actually above the label.

All you needed was some CSS added to the input checkbox to make sure the label was above it and it works like a charm :

Fiddle

.filterset input {
    display: inline-block;
    z-index: -1;
}

Answer 2

I change the selector for the input element and it appears to work (although a little 'touchy')-

http://jsfiddle.net/jayblanchard/3WL4D/5/

var $j = jQuery.noConflict();
$j(window).load(function () {
    $j(".filterset").selectable({
        //filter: 'checkbox', // turned out to be unimportant
        stop: function () {
            $j(".ui-selected :checkbox", this).each(function () { // note the change
                this.checked = !this.checked
            });
        }
    });
});