Shift clicking bootstrap / FlatUI checkboxes

Question

I have this neat script for handling when a user shift clicks from one checkbox to another to select multiples.

var last_clicked = null;
$("table.multi-select").on("click", "input:checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table"); 

    if (!last_clicked)
        last_clicked = this; 

    if (event.shiftKey) {
        var start = grid.find("tbody input:checkbox").index(this);
        var end = grid.find("tbody input:checkbox").index(last_clicked);
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            grid.find("tbody input:checkbox")[i].checked = last_clicked.checked;
        }
    }

    last_clicked = this;
});

It works well. I'm now replacing my checkboxes with styled bootstrap / FlatUI ones. These hide the actual checkbox and replace it with a styled label. I've modified my shift click script accordingly

$("table.multi-select").on("click", "label.checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table");

    if (!last_clicked)
        last_clicked = this;

    if (event.shiftKey) {
        var start = grid.find("tbody label.checkbox").index(this);
        var end = grid.find("tbody label.checkbox").index(last_clicked);
        // find checked state of last clicked 
        var checked_last = $(last_clicked).hasClass("checked"); 
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            // don't check 'this', because flatUI will toggle it when we're done
            if(i != start) 
                $(grid.find("tbody label.checkbox input:checkbox")[i]).checkbox(checked_last ? "check" : "uncheck");
        }            
    }

    last_clicked = this;
});

This works too. The problem is, it also selects all the text on the page between the checkboxes! How do I stop this from happening?

Unless we see an actual example, hard to tell. But can you try [deselecting the text](http://stackoverflow.com/questions/6186844/clear-a-selection-in-firefox/6187098#6187098)? — mccannf, Oct 02 '14 at 16:09
@mccannf, that did the trick. Post that as an answer and I'll accept it! — roryok, Oct 02 '14 at 18:11

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

In your logic for handling the shift key, you can subsequently deselect the text using the answer to this question:

Clear a selection in Firefox

edited May 23 '17 at 12:17

Community

1
1

answered Oct 02 '14 at 18:23

mccannf

16,619
3
51
63

Shift clicking bootstrap / FlatUI checkboxes

1 Answers1