Shift + Щелчок, чтобы выбрать диапазон флажков

У меня создаются большие таблицы, и в каждой строке есть флажок класса «chcktbl».

В заголовке таблицы есть флажок «Выбрать все», класс «chckHead».

Функция выбора/отмены выбора всех работает нормально, как и количество выбранных диаграмм, которые я отобразил в заголовке таблицы.

Функция включения возможности Shift+щелчок для выбора диапазона флажков также работает, но в ее текущем формате выбирает только 10 флажков перед созданием сообщения об ошибке во всплывающем окне:

«Прекратить выполнение этого сценария? Сценарий на этой странице замедляет работу вашего веб-браузера. Если он продолжит работу, ваш компьютер может перестать отвечать на запросы».

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

Это очень распространенная функция для выбора диапазона элементов одним щелчком мыши, но я не могу найти эффективного способа сделать это. Если кто-нибудь знает лучший способ приблизиться к этому или может заметить некоторую неэффективность в коде, пожалуйста, дайте мне знать.


person user2690652    schedule 16.08.2013    source источник


Ответы (2)


Как насчет использования jquery nextUntil?

На самом деле я не проверял это, но это должно дать вам основную идею и удалить цикл for. Я создал аналогичную функциональность перед использованием nextUntil/prevUntil и никогда не получал неотвечающих страниц.

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();
};
person AndrewK    schedule 16.08.2013
comment
У меня очень мало опыта программирования, и у меня нет опыта работы с javascript/jquery, поэтому мне будет сложно обнаружить даже небольшие синтаксические ошибки. Я попытался использовать этот код как есть, и возможность выбора диапазона полей исчезла. - person user2690652; 17.08.2013
comment
В этом случае создайте jsfiddle, используя ваш текущий код, а затем я могу изменить его для демонстрации. - person AndrewK; 17.08.2013

Я попробовал ваш код, и он работал хорошо для меня. Возможно, вы захотите попробовать этот плагин jquery

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

person MikeD    schedule 16.08.2013
comment
Это может быть действительно глупо, но потерпите меня. Я сохранил этот текст на рабочем столе как shift_click.js. В заголовке html-документа я импортировал его: <script src="C:\Users\user\Desktop\shift_click.js"></script> Затем я добавил следующую строку вместо приведенного выше кода, начиная с var lastClickedBox = 0 : $form.find('chcktbl').shiftSelectable();, и когда это не сработало, я попробовал вместо этого $('#form').find. Еще ничего. Я пропустил что-то действительно основное здесь? - person user2690652; 17.08.2013
comment
Кроме того, вы сказали, что мой код работает хорошо. Он делает именно то, что я хочу, пока я не попытаюсь выбрать более 10 ящиков. В этот момент он выбирает первые 10 и появляется всплывающее окно. Разрешение скрипту продолжать работу выбирает следующие 10, и всплывающее окно генерируется снова. В конечном итоге он выберет весь диапазон, но только если я продолжу разрешать его через всплывающее окно. - person user2690652; 17.08.2013
comment
Это плагин jquery, поэтому он будет работать, только если вы используете jQuery. Лучше получить локальную копию, но вы можете попробовать добавить ее в заголовок своей страницы ‹script src=code.jquery.com/jquery-latest.min.js type=text/javascript›‹/script› Когда я сказал, что ваш код работает хорошо для меня, у меня было 200 флажков на странице, и выбирал большие куски из них. Может дело в браузере. Причина, по которой этот плагин, вероятно, более эффективен, чем ваш код, заключается в том, что вы используете циклы, но этот использует нарезку массива и массовый выбор. - person MikeD; 17.08.2013
comment
Этот URL-адрес не существует. Не могли бы вы обновить свой ответ - person Apul Gupta; 18.04.2017