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?

cbp · Accepted Answer · 2012-08-09T05:38:57.060

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

Have any vanilla JS solution? – TarasH Jun 25 '20 at 14:41 — TarasH, Jun 25 '20 at 14:41

score 2 · Answer 2 · answered Jul 10 '12 at 08:05

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

answered Jul 10 '12 at 08:05

Tats_innit

33,991
10
71
77

yes almost, but it would be better if you had to click-and-drag, rather than just waving the mouse – cbp Jul 10 '12 at 08:12
I think to make it usable you would also need to initially click on one of the checkboxes, rather than just anywhere on the screen – cbp Jul 10 '12 at 08:16
Hiya @cbp `:)` hmm I can make my own fake event mixing between , click, mousedown, and hover but that will take time `:)` funny thing is `drag` event is there by for div and stuff! `:)` o well you gave my idea for my next plugin. although not sure if there is another event beside mouse enter to fake the drag over - **Plz Note:** `:)` you can tell user that it is drag coz it will select it on mouse enter anyways if that suffice the need. I reckon mouse enter will do the rick :P lemme see / think... – Tats_innit Jul 10 '12 at 08:19
@Trufa lol NO worries + but yeah ping me if you have better Idea we can write a plugin for an event for this `:)` – Tats_innit Jul 10 '12 at 08:36

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

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.

edited May 23 '17 at 10:26

Community

1
1

answered Jul 10 '12 at 08:22

Trufa

39,971
43
126
190

Yeah cool, that's the behaviour I was looking for. I'll see what I can throw together too. First one past the line gets the 25 points :) – cbp Jul 10 '12 at 13:00

Swipe to select checkboxes in a web browser

3 Answers3