Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email: hello@sanisoft.com

Blog

jQuery shiftcheckbox plugin

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

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.

About the Author

30 comments

  1. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms : Speckyboy Design Magazine

  2. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms | pc-aras

  3. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms | WEBDESIGN FAN

  4. Pingback: 16个Javascript表单事件脚本(表单验证、选择) « 幻岛|领地

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

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

  7. Pingback: jQuery shiftcheckbox plugin 开源项目 - Ajax代码大全 - Java开源项目 - 表单Form - ajax表单form控件 - Java免费软件 - jQuery-shiftcheckbox-plugin - 开源网

  8. Pingback: 55 jQuery Form Plugins To Download And Use | Design your way

  9. Pingback: 55 jQuery Form Plugins To Download And Use « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

  10. Pingback: 55 jQuery Form Plugins To Download And Use : Free Pictures

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

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

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

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

  15. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms | 冷风留痕

  16. Pingback: jQuery Plugins and Tutorials to Enhance Forms » Example Codes

  17. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms | ExceptionHandle.com

  18. Pingback: » Tutorials and plugins for dealing with web forms DESIGNLANDER

  19. Pingback: jQuery Plugins and Tutorials to Enhance Forms | Creative Agency Delhi – Branding, Design, Digital, Print, Consultancy, Web Design – SE1

  20. Pingback: 20 jQuery Plugins and Tutorials to Enhance Forms | Jopt | Just another WordPress site

  21. Pingback: 15 Plugins y tutoriales jQuery para mejorar tus formularios

  22. Pingback: All posts in Forms | Thiết kế web

Leave a Reply