jQuery plugin for shift + click to select multiple checkboxes

gistfile1.js

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

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.

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..

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

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

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