У меня создаются большие таблицы, и в каждой строке есть флажок класса «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>
Это очень распространенная функция для выбора диапазона элементов одним щелчком мыши, но я не могу найти эффективного способа сделать это. Если кто-нибудь знает лучший способ приблизиться к этому или может заметить некоторую неэффективность в коде, пожалуйста, дайте мне знать.