Presenting a jQuery plugin to select a range of consequetive checkboxes with just two clicks. The plugin is inspired from the GMail checkboxes functionality and works exactly the same. Just keep the ‘Shift’ key pressed and select a starting checkbox and the last checkbox that you want to select. Just try the demo if things are not yet clear
Click here for a demo.
Usage
Include the plugin file in your page after jQuery file, assign similar CSS class names to the checkboxes to group them and call the plugin as follows
- $(document).ready (
- function () {
- $('.css-class-name').shiftcheckbox();
- }
- );
You can have as many checkbox groups as you want on the same page as long as each group has a unique CSS class name attached to it.
Download here.
The script dosent work.
Tested on FF 3.5 and latest Safari (both on Mac)
The script does not work in your setup OR the demo listed on this page is also not working?
Sorry, it works great !!
It was me who screwed up.
Great work !
Thanks! Great plugin!
hey gr8 tool saved my life.
thanx a million…
Regards
Nitesh Chauhan.
It would be great if it would work with unchecking also,
for instance, click 1st with shift then 10th to check all inn between, then click 3rd and 8th with shift to uncheck 3 through 8.
Stefan, it does what you want. All you need to do is “break the chain”. You do this by releasing the shift key, deselecting the first checkbox in the range you want deselected (in your example the “3″) and then reselecting it again. Not until then you press shift again and click the last in the row that shall be deselected: voilà!
Thanks, Aditya!
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
How to use shiftcheckbox with jquery.tablesorter.pager.js?
Thanks！
Hi Aditya,
why did you prefer the class selector over “input[type=checkbox”? I just tried to implement the plugin in the admin of my CMS and remarked input[type=checkbox works. Will it have any disadvantages?
Thanks again!
Uli
Forgetful me!
You can have as many checkbox groups as you want on the same page as long as each group has a unique CSS class name attached to it.
Yes, that’s the reason for adding class names
Hi, I added support for a “check all” checkbox. This check all could be in the column header if the shiftcheckboxes are in a table.
Just call $(‘.’).shiftcheckbox(‘#) in $(document).ready
(function($) {
$.fn.shiftcheckbox = function(checkAllId) {
var prevChecked = null;
selectorStr = this;
allCbId = checkAllId;
$(selectorStr).bind("click", handleClick);
if (allCbId != null) {
$(allCbId).bind("click", handleAllClick);
}
};
function handleAllClick(event) {
var checkStatus = this.checked; // set all the checkboxes as selected
$(selectorStr).each(function() {
this.checked = checkStatus;
})
}
function handleClick(event) {
var val = this.value;
var checkStatus = this.checked;
var allChecked = checkStatus;
//get the checkbox number which the user has checked
//check whether user has pressed shift
if (event.shiftKey) {
if (prevChecked != 'null') {
//get the current checkbox number
var ind = 0, found = 0, currentChecked;
currentChecked = getSelected(val);
ind = 0;
$(selectorStr).each(function(i) {
if (currentChecked = currentChecked && ind = prevChecked && ind <= currentChecked) {
this.checked = checkStatus;
}
}
ind++;
allChecked = allChecked && this.checked;
});
prevChecked = currentChecked;
}
} else {
if (checkStatus) {
prevChecked = getSelected(val);
}
$(selectorStr).each(function() {
allChecked = allChecked && this.checked;
});
}
if (allCbId != null) {
$(allCbId).attr("checked", allChecked); // set "all" checkbox to checked
}
};
function getSelected(val) {
var ind = 0, found = 0, checkedIndex;
$(selectorStr).each(function(i) {
if (val == this.value && found != 1) {
checkedIndex = ind;
return false; // break loop
}
ind++;
return true;
});
return checkedIndex;
};
})(jQuery);
Cheers!
hi, congratulations for the project
what i want to achieve is make this script work with two ( or more ) separate groups of check-boxes !
is it possible ?! how ?!
thank you.