Question

Sometimes our forms have a lot of checkboxes in a table column. The user has to go through and check a bunch of them (but not all of them).

Often I think it would be nice if you could just click and drag across the checkboxes, selecting the ones you want with one swipe.

I haven’t seen this implemented before. Does anyone have an opinion on the usability of something like this?

Has anyone seen a jquery plugin that could enable this?

Answer 1

Here’s my answer, which credit to Trufa and Tats for getting the ball rolling: http://jsfiddle.net/ebStc/7/

Here is a plugin for it:

$.fn.swipeable = function() {

var mousedownOn = {
        id: '',
        checkState: false
    };

$(document)
    .mouseup(function() {
        mousedownOn.id = '';
    });

$(this)
    .filter(':checkbox')
    .mousedown(function() {
        var $this = $(this);
        mousedownOn.id = $this.attr('id');
        mousedownOn.checkState = $this.prop('checked');
        $this.prop('checked',!$this.prop('checked'));
        $this.change();
    })
    .mouseenter(function() {
        var $this = $(this);

        if (mousedownOn.id != '' && mousedownOn.id != $this.attr('id')){
            $this.prop('checked',!mousedownOn.checkState);
            $this.change();
        }
    })
    .click(function(e) {
        e.preventDefault();
        return false;
    });
};