Wie kann ich mehrere Kontrollkästchen wie GMail mit der Umschalttaste auswählen?

Question 1

In GMail kann der Benutzer auf ein Kontrollkästchen in der E-Mail-Liste klicken, die Umschalttaste gedrückt halten und ein zweites Kontrollkästchen auswählen. Das JavaScript aktiviert/deaktiviert dann die Kontrollkästchen, die sich zwischen den beiden Kontrollkästchen befinden.

Ich bin gespannt, wie das gemacht wird? Ist das JQuery oder ein einfaches (oder komplexes) JavaScript?

Question 2

Ich habe eine eigenständige Demo geschrieben, die jquery verwendet:

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var lastChecked = null;

    $chkboxes.click(function(e) {
        if (!lastChecked) {
            lastChecked = this;
            return;
        }

        if (e.shiftKey) {
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);

            $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', lastChecked.checked);
        }

        lastChecked = this;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
    <input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/>
    <input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/>
    <input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/>
    <input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/>
    <input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/>
    <input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/>
    <input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/>
</body>
</html>

Question 3

Dies geschieht durch ziemlich einfaches Javascript.

Sie verfolgen die ID des zuletzt aktivierten Kontrollkästchens und wenn ein anderes Kontrollkästchen aktiviert ist, verwenden sie die shiftKey-Ereignisattribut um zu sehen, ob beim Klicken auf das Kontrollkästchen die Umschalttaste gehalten wurde. Wenn ja, setzen sie die geprüftes Eigentum jedes Kontrollkästchens zwischen den beiden auf wahr.

Um festzustellen, wann ein Kontrollkästchen aktiviert ist, verwenden sie wahrscheinlich ein anklicken Ereignis auf die Kontrollkästchen

Question 4

Kürzlich habe ich ein jQuery-Plugin geschrieben, das diese Funktion und mehr bietet.

Nach dem Einbinden des Plugins müssen Sie nur den Kontext der Checkboxen mit dem folgenden Code-Snippet initialisieren:

$('#table4').checkboxes({ range: true });

Hier ist der Link zur Dokumentation, Demo & Download: http://rmariuzzo.github.io/checkboxes.js/

Question 5

Es scheint, als ob jede Antwort, die ich online finden kann, dafür vollständig von jQuery abhängig ist. JQuery fügt sehr wenig Funktionalität hinzu. Hier ist eine schnelle Version, die keine Frameworks erfordert:

function allow_group_select_checkboxes(checkbox_wrapper_id){
    var lastChecked = null;
    var checkboxes = document.querySelectorAll('#'+checkbox_wrapper_id+' input[type="checkbox"]');

    //I'm attaching an index attribute because it's easy, but you could do this other ways...
    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].setAttribute('data-index',i);
    }

    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener("click",function(e){

            if(lastChecked && e.shiftKey) {
                var i = parseInt(lastChecked.getAttribute('data-index'));
                var j = parseInt(this.getAttribute('data-index'));
                var check_or_uncheck = this.checked;

                var low = i; var high=j;
                if (i>j){
                    var low = j; var high=i; 
                }

                for(var c=0;c<checkboxes.length;c++){
                    if (low <= c && c <=high){
                        checkboxes[c].checked = check_or_uncheck;
                    }   
                }
            } 
            lastChecked = this;
        });
    }
}

Und dann initialisieren Sie es, wann immer Sie es brauchen:

allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')

Question 6

Nun, der Beitrag ist ziemlich alt, aber hier ist eine Lösung, auf die ich gerade gestoßen bin:
jQuery-Feld-Plug-in

Question 7

Habe diese Lösung von http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ (jetzt tot):

JavaScript- und HTML-Code

var NUM_BOXES = 10;

// last checkbox the user clicked
var last = -1;

function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  if (!event) { event = window.event }
  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
     var di = num > last ? 1 : -1;
     for (var i = last; i != num; i += di) {
        document.forms.boxes['box[' + i + ']'].checked = true;
     }
  }
  last = num;
}

function init() {
  for (var i = 0; i < NUM_BOXES; i++) {
    document.forms.boxes['box[' + i + ']'].onclick = check;
  }
}

<body onload="init()">
    <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
    </form>
</body>

Question 8

Ich habe die jQuery-Version von @BC genommen. und es in eine ES6-Version umgewandelt, da der Code das Problem eigentlich ziemlich elegant löst, falls jemand noch darüber stolpert …

function enableGroupSelection( selector ) {
  let lastChecked = null;
  const checkboxes = Array.from( document.querySelectorAll( selector ) );

  checkboxes.forEach( checkbox => checkbox.addEventListener( 'click', event => {
    if ( !lastChecked ) {
      lastChecked = checkbox;

      return;
    }

    if ( event.shiftKey ) {
      const start = checkboxes.indexOf( checkbox );
      const end   = checkboxes.indexOf( lastChecked );

      checkboxes
        .slice( Math.min( start, end ), Math.max( start, end ) + 1 )
        .forEach( checkbox => checkbox.checked = lastChecked.checked );
    }

    lastChecked = checkbox;
  } ) );
}