Skip to content

Instantly share code, notes, and snippets.

@AndrewRayCode
Created September 25, 2012 19:53
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save AndrewRayCode/3784055 to your computer and use it in GitHub Desktop.
Save AndrewRayCode/3784055 to your computer and use it in GitHub Desktop.
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;
});
};
@puppyceceyoyo
Copy link

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
Copy link

vkoves commented Jun 2, 2015

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

@nicolasfranck
Copy link

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

often doesn't work (I tested in Chrome)

This does:

$boxes.slice(Math.min(start, end), Math.max(start, end) + 1).each(function(){
  this.checked = lastChecked.checked;
  $(this).trigger('change');
});

@zergius-eggstream
Copy link

https://gist.github.com/zergius-eggstream/bea51020b471886bafe1b2baef9817b8
almost the same but with live collections support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment