Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

Mehrere Checkboxen mit Shift checken wie bei Google Mail

#Tutorials#jQuery

Kommentare

Es gibt 0 Kommentare

Tags

#jquery #checkbox #gmail #like google mail #shift #shiftkey

Facebook Twitter

13. Nov 2012

Ich habe hier ein kleines Script, dass ähnlich wie bei Google Mail mehrere Checkboxen anklickt, wenn man die Shift-Taste gedrück hält.

Demo:

<input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1

<input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2

<input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3

<input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4

<input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5

<input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6

<input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7

Script


jQuery(document).ready(function() {
	var $chkboxes = jQuery('.chkbox');
	$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).attr('checked', lastChecked.checked);
	}
	lastChecked = this;
	});
});

Die Funktionsweise:

1. Alle Checkboxen mit einer bestimmten Klasse (hier chkbox) werden eingesammelt

2. Klickt man auf eine und es gibt keinen Letztangeklickten, dann ist es dieser

3. Gibt es einen Letztangeklickten und die Shift-Taste wurde gedrückt, dann werden alle Checkboxen dazwischen entweder an- oder abgewählt

4. Das wars

Viel Spaß beim Programmieren!

Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Mehrere Checkboxen mit Shift checken wie bei Google Mail

Kommentare

Tags

Kommentare

Hinterlasse einen Kommentar