Select Multiple checkbox with shiftkey

An answer to this Question which was asked on forum.

Basically if you have a multiple check box and you want to select multiple check box with Shift key
pressed and mouse key click then it would be quite handy sometimes.




First we will find the class name of check box.

$("input[type='checkbox']").change(function() {
    var classes = $("input[type='checkbox']:checked").map(function() {
        return this.className;
    }).get().join(",");
    alert(classes);
});

Run above code in DOM and hit enter it will save your state now click any check box from page it will alert Class name of particular check box now if every check box are having same class then it would be quite easy to deal with it.

Alert will be something like this.
u-TF-item u-TF-item--checkbox row-selector

Now will just a create a logic to get things done according to our needs.Just edit your page and use below logic to get things done.

var lastChecked = null;
 
            $(document).ready(function() {
                var $chkboxes = $('.u-TF-item.u-TF-item--checkbox.row-selector');
                $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).prop('checked', lastChecked.checked);
 
                    }
 
                    lastChecked = this;
                });
            });

Cool Done :)
demo
test/test