Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Checkbox click script - [SHIFT] check/uncheck range, [CTRL] check/uncheck all -- based on select name?

Would anyone know of a ready-made script or plugin providing:

-Shift click for check/uncheck all in range
-CTRL click to select or unselect all

That can works off the check inputs 'name' (instead of all on a page or all inside a div):

input[name='user_group[]']
input[name='record_group[]']

I've been using a couple of scripts (javascript and jQuery) but they're based on all checkboxes in a div or table and I'm not smart enough to roll my own or modify another script. Google searching on this has been a little difficult (too many common terms I think)...

Thanks Much Appreciated!

like image 378
Reno Avatar asked Feb 02 '26 07:02

Reno


1 Answers

I started playing around with this script, although it's missing a CTRL+Click feature (select all/none control).

In it's original form it works against all checkboxes on a page. I changed the "$('input[type=checkbox]').shiftClick();" linke to "$("input[name='selected_employees[]']").shiftClick();" and as far as I can tell it seems to be working perfectly now against only the single checkbox group.

The only flaw (for my requirements) is there is not a CTRL+Click function to toggle check or un-check all checkboxes in the group.

<script type="text/javascript">
  $(document).ready(function() {
    // shiftclick:  http://sneeu.com/projects/shiftclick/
    // This will create a ShiftClick set of all the checkboxes on a page.
    $(function() {
        $("input[name='selected_employees[]']").shiftClick();
        // $('input[type=checkbox]').shiftClick();
    });

    (function($) {
        $.fn.shiftClick = function() {
            var lastSelected;
            var checkBoxes = $(this);

            this.each(function() {
                $(this).click(function(ev) {
                    if (ev.shiftKey) {
                        var last = checkBoxes.index(lastSelected);
                        var first = checkBoxes.index(this);

                        var start = Math.min(first, last);
                        var end = Math.max(first, last);

                        var chk = lastSelected.checked;
                        for (var i = start; i < end; i++) {
                            checkBoxes[i].checked = chk;
                        }
                    } else {
                        lastSelected = this;
                    }
                })
            });
        };
    })(jQuery);
  });
</script>
like image 73
Reno Avatar answered Feb 03 '26 21:02

Reno



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!