Shift + Click to Select a Range of Checkboxes

Question

I have large tables being generated and each row has a checkbox, class "chcktbl".

In the table header, there is a Select All checkbox, class "chckHead".

The select/deselect all function works fine, as does the count of selected charts I have displayed in the table heading.

The function to enable shift+click capability to select a range of checkboxes also works, but in its current format, only selects 10 checkboxes before generating an error message in a popup window:

"Stop running this script? A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive."

<script type=text/javascript>


        //select all button
        $('#chckHead').click(function() {

            if (this.checked === false) {
                $('.chcktbl:checked').attr('checked', false);
            }
            else {
                $('.chcktbl:not(:checked)').attr('checked', true);
            }
            countSelected();

        });

//count number of boxes checked        
function countSelected() {
            var numCharts = $('input.chcktbl:checked').length;
            $('#numCharts').html(numCharts);

        }


        //SHIFT+Click to select a range of checkboxes:

        // this variable stores the most recently clicked checkbox
    // it is used for shift-clicks
    var lastClickedBox = 0;

    // the checkbox functionality is default to the browser
    $('.chcktbl').click(function(event) {
        var clickedBox = $('.chcktbl').index(event.target);
        if(event.shiftKey) {
            setCheckboxes(lastClickedBox, clickedBox);
        };
        lastClickedBox = clickedBox;
                    countSelected();
    });


    // sets all the checkboxes between the specified indices to true

    function setCheckboxes(end, start) {
        if(start > end) {
            var temp = start;
            start = end;
            end = temp;
        };
        for(var i = start; i < end; i++) {  
        $('.chcktbl').eq(i).prop('checked', true);
        };
                    countSelected();
    };

    </script>

This is a really common feature for selecting a range of items with one click, but I can't find an efficient way to do it. If anyone knows a better way of approaching this or can spot some inefficiency in the code then please let me know.

score 0 · Answer 1 · answered Aug 16 '13 at 20:37

0

How about using jquery nextUntil?

I didn't actually test this but this should give you the basic idea and it removes the for loop. I created similar functionality to this before using nextUntil/prevUntil and never got an unresponsive page.

function setCheckboxes(end, start) {
    if(start > end) {
        var temp = start;
        start = end;
        end = temp;
    };

    $('.chcktbl').eq(start).nextUntil(':eq('+(end+1)+')').add().prop('checked', true);
    countSelected();
};

answered Aug 16 '13 at 20:37

AndrewK

717
5
11

I have very little programming experience and none with javascript/jquery so spotting even small syntax errors is going to be hard for me. I tried using that code as is and the ability to select a range of boxes was gone. – user2690652 Aug 16 '13 at 20:43
In that case, make a jsfiddle using your current code and then I can modify it to demonstrate. – AndrewK Aug 16 '13 at 20:46

score 0 · Answer 2 · answered Aug 16 '13 at 20:39

0

I tried you code and it worked well for me. You might want to try this jquery plugin

https://gist.github.com/DelvarWorld/3784055

answered Aug 16 '13 at 20:39

MikeD

372
1
10

This might be really dumb but bear with me. I saved that text on my desktop as "shift_click.js". In the head of the html document I imported it: `` Then I added the following line in place of the code above, beginning with `var lastClickedBox = 0` : `$form.find('chcktbl').shiftSelectable();` and when that didn't work, I tried `$('#form').find` instead. Still nothing. Am I missing something really basic here? – user2690652 Aug 16 '13 at 21:06
Also, you said my code worked well. It does exactly what I want it to do, until I try selecting more than 10 boxes. At that point, it selects the first 10 and the popup window comes. Allowing the script to continue running selects the next 10 and the popup is generated again. It will eventually select the entire range, but only if I keep allowing it to via the popup. – user2690652 Aug 16 '13 at 21:11
This is a jquery plugin, so it will only work if you are using jQuery. Its better to get a local copy, but you can try adding this to the head of your page When I said your code was working well for me, I had 200 checkboxes on the page, and was selecting large chunks of them. Could be a browser thing. The reason this plugin is probably more efficient than your code is your is using loops, but this one is using array slicing and bulk selecting – MikeD Aug 16 '13 at 21:56
This URL doesn't exist. Can you please update your answer – Apul Gupta Apr 18 '17 at 07:13

Shift + Click to Select a Range of Checkboxes

2 Answers2