Swipe to select checkboxes in a web browser

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;
    });
};

Answer 2

Like this man? http://jsfiddle.net/ebStc/3/ or http://jsfiddle.net/ebStc/2/

Please let me know if this helps, or I am happy to remove this post.

Hope it help the cause.

behaviou when you will drag your mouse pointer it will get selected and if drag again it will deselect :)

code

$('input[type="checkbox"]').mouseenter(function() {

    if ($(this).is(':checked')) {
        $(this).prop('checked',false);
    } else {
         $(this).prop('checked',true);
    }
});​

Answer 3

DISCLAIMER: This is unfinished work and it is based on Tats answer and this answer.

You can check the live example here.

It think it is what OP wanted but haven't figured out why it is not actually checking the first checkbox when you do a mouse down, but it is close to the mouse drag effect the OP was looking for.

Edit here is a non ideal solution.