Skip to content

@DelvarWorld /gist:3784055
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin for shift + click to select multiple checkboxes
// Usage: $form.find('input[type="checkbox"]').shiftSelectable();
// replace input[type="checkbox"] with the selector to match your list of checkboxes
$.fn.shiftSelectable = function() {
var lastChecked,
$boxes = this;
$boxes.click(function(evt) {
if(!lastChecked) {
lastChecked = this;
return;
}
if(evt.shiftKey) {
var start = $boxes.index(this),
end = $boxes.index(lastChecked);
$boxes.slice(Math.min(start, end), Math.max(start, end) + 1)
.attr('checked', lastChecked.checked)
.trigger('change');
}
lastChecked = this;
});
};
@rmariuzzo

Nice! I have wrote a jQuery plugin with that feature and some others: http://rmariuzzo.github.io/checkboxes.js/ Maybe it would be nice to work on together on it.

@noelpur

Thanks for this cool piece of code. I am using it together with jquery tablesorter. After sorting the table, range selector goes weird. How can I reset it so that I could run shiftSelectable() again after sorting? Thanks again.

@noelpur

Got it, insert this code on line 7:
$boxes.off('click');

I then run initialize the code as callback every time I sort the table.

@abhishekgithub

var chkboxes = $('.chkbox');
chkboxes.click(function(e) {
if(!lastChecked) {
lastChecked = this;
return;
}

        if(e.shiftKey) {
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);

            $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked);

        }

        lastChecked = this;
    });

What about this one?

@MazeChaZer

For the latest jQuery versions, you need to use .prop() instead of .attr() in line 18 to make this work properly, see http://api.jquery.com/attr/

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

@puppyceceyoyo

I was unable to shift+check the checkboxes again after range select once. After changed to .prop() , it works well now... I use it together with gridview, after sorting, it still can range select very well too.. : ) Thanks for this cool JS codes..

@vkoves

For anyone looking for how to do it with tablesorter based on @noelpur:

$(document).ready(function() 
{ 
    $("#listCont").tablesorter(); 
    $("#listCont").find('input[type="checkbox"]').shiftSelectable();

    $("table").bind("sortEnd",function()
    { 
        $("#listCont").find('input[type="checkbox"]').shiftSelectable();
    })
});


// Usage: $form.find('input[type="checkbox"]').shiftSelectable();
// replace input[type="checkbox"] with the selector to match your list of checkboxes

$.fn.shiftSelectable = function() {
    var lastChecked,
        $boxes = this;
        $boxes.off('click');

    $boxes.click(function(evt) 
    {
        if(!lastChecked) 
        {
            lastChecked = this;
            return;
        }

        if(evt.shiftKey) 
        {
            var start = $boxes.index(this),
                end = $boxes.index(lastChecked);
            //console.log("START: " + start + " END: " + end);

            $boxes.slice(Math.min(start, end), Math.max(start, end) + 1)
                .attr('checked', lastChecked.checked)
                .trigger('change');
        }

        lastChecked = this;
    });
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.