Как я могу сместить-выбрать несколько флажков, как GMail?

Question

В GMail пользователь может щелкнуть один флажок в списке адресов электронной почты, удерживать клавишу Shift и выбрать второй флажок. Затем JavaScript будет устанавливать / снимать флажки между двумя флажками.

Мне интересно, как это сделать? Это JQuery или какой-то базовый (или сложный) JavaScript?

Answer 1

Вот еще одна реализация, аналогичная множественному выбору Outlooks.

    <script type="text/javascript">

function inRange(x, range)
{
    return (x >= range[0] && x <= range[1]);
}

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var firstClick = 1;
    var lastClick = null;
    var range = [];

    $chkboxes.click(function(e) {
        if(!e.shiftKey && !e.ctrlKey) {

            $('#index-' + firstClick).prop('checked', false);

            firstClick = $chkboxes.index(this) + 1;

            if (firstClick !== null && firstClick !== ($chkboxes.index(this)+1)) {
                $('#index-' + firstClick).prop('checked', true);
            }
        } else if (e.shiftKey) {
            lastClick = $chkboxes.index(this) + 1;
            if ((firstClick < lastClick) && !inRange(lastClick, range)) {
                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            } else if ((firstClick > lastClick) && !inRange(lastClick, range)) {
                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            } else if ((firstClick < lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            }else if ((firstClick > lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            }
        }
    });
});

Answer 2

Это решение jquery, которое я написал и использовал:

• Все флажки имеют одинаковый класс с именем chksel
• Для более быстрого индивидуального выбора класс будет нести заказ по имени chksel_index

• Также каждый checkbox имеет атрибут с именем rg, который содержит тот же Индекс

  var chksel_last=-1;
  $('.chksel').click(function(ev){
     if(ev.shiftKey){var i=0;
        if(chksel_last >=0){
          if($(this).attr('rg') >= chksel_last){
           for(i=chksel_last;i<=$(this).attr('rg');i++){$('.chksel_'+i).attr('checked','true')}}
          if($(this).attr('rg') <= chksel_last){for(i=$(this).attr('rg');i<=chksel_last;i++){$('.chksel_'+i).attr('checked','true')}}
        }  
        chksel_last=$(this).attr('rg');
     }else{chksel_last=$(this).attr('rg');}
  

  })