Checkbox mit jQuery steuern

Die "checked"-Eigenschaft einer Checkbox bestimmt, ob bei dieser ein Häkchen gesetzt ist.Um die "checked"-Eigenschaft zu steuern gibt es mit jQuery mehrere Möglichkeiten, von denen hier zwei vorgestellt werden.

Möglichkeit 1: Jquery.prop

Die prop-Funktion kann eine Eigenschaft eines DOM-Knotens (in diesem Fall unsere Checkbox) direkt verändern. Wenn die "checked"-Eigenschaft auf true gesetzt ist, hat unsere checkbox ein Häkchen. Jetzt können wir das Häkchen zum Beispiel mit einem Button steuern.

<input id="check" type="checkbox">
<button id="check-button">checken</button>

Hier unser kleines Skript:

$('#check-button').click(function() {
	$('#check').prop('checked', true);
});

Da checked einen booleschen Wert enthält, kann man zwischen den Zuständen auch ganz einfach hin- und herschalten.

$('#check-button').click(function() {
	$('#check').prop('checked', !$('#check').prop('checked'));
});

Möglichkeit 2: Click-Event auslösen

Für viele Fälle eignet sich aber auch folgende sehr kurze Methode, bei der wir einfach das Click-Event auf der Checkbox auslösen.

$('#check').click();

Wir verlassen uns hier also einfach auf das "natürliche" Verhalten einer Checkbox, die beim Anklicken schon von sich aus ihren Zustand verändert.

Mit dieser Methode lassen sich auch mehrere Checkboxen gleichzeitig steuern, wenn wir zum Beispiel von folgendem HTML ausgehen:

<input class="check" type="checkbox">
<input class="check" type="checkbox">

Dieses Skript ändert dann alle Boxen gleichzeitig.

$('.check').click();

Mit der prop-Funktion geht das auch, jedoch müssen wir dabei noch über alle Boxen iterieren. Dafür können wir die each-Funktion nutzen.

$('.check').each(function() {
	$(this).prop('checked', !$(this).prop('checked'));
});

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project