Aktivieren und deaktivieren Sie Kontrollkästchen in jQuery
-
Toggle Checkboxes mit der
.prop()-Methode -
Toggle Checkboxes mit der
.each()-Methode -
Toggle Checkboxes mit der Methode
.trigger()
In diesem Artikel werden drei Methoden erläutert, mit denen Sie mehrere Kontrollkästchen gleichzeitig mit jQuery umschalten können. Die drei Methoden verwenden drei in jQuery verfügbare Methoden; dies sind .prop(), .each() und .trigger().
Toggle Checkboxes mit der .prop()-Methode
In jQuery können Sie mit der Methode .prop() die Eigenschaften von HTML-Elementen setzen. Hier können Sie es für die Checkboxen in Ihrem Code verwenden, um deren Zustand zwischen markiert und nicht markiert zu wechseln.
Das nächste Beispiel zeigt Ihnen, wie es gemacht wird; Darin haben wir einen HTML- und jQuery-Code. Der HTML-Code enthält Kontrollkästchen, und wenn Sie auf das erste klicken, werden sie alle aktiviert.
Wir haben der ersten Checkbox im jQuery-Code ein click-Event hinzugefügt. Danach manipulieren wir die Eigenschaft checked der restlichen Checkboxen.
Wenn Sie das erste Kontrollkästchen zum ersten Mal aktivieren, werden alle Kontrollkästchen aktiviert. Wenn Sie es deaktivieren, kehren die verbleibenden Kontrollkästchen in ihren Standardzustand zurück; ungeprüft.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-lang"> Select all languages
</label>
<label>
<input type="checkbox" class="tech"> Cascading Style Sheets
</label>
<label>
<input type="checkbox" class="tech"> Hypertext Markup Language
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-lang").click(function() {
let check_boxes = $("input.tech");
// Swap the "prop" attribute each time the
// user clicks the "select-lang" checkbox.
check_boxes.prop("checked", !check_boxes.prop("checked"));
});
});
</script>
</body>
</html>
Ausgang:
Toggle Checkboxes mit der .each()-Methode
Die .each()-Methode zum Umschalten von Kontrollkästchen funktioniert so, wie wir es mit .prop() gezeigt haben. Aber es gibt einen Unterschied; Wir verwenden eine Funktion, um über jedes Kontrollkästchen zu iterieren.
Während dieser Iteration haben wir den Zustand der Checkboxen von markiert auf nicht markiert geändert. Der folgende Code zeigt Ihnen, wie es gemacht wird.
Außerdem haben wir den HTML-Code des ersten Beispiels aktualisiert; Dieses Mal enthalten die Kontrollkästchen die Namen der Länder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-country"> Select all countries
</label>
<label>
<input type="checkbox" class="country"> Georgia
</label>
<label>
<input type="checkbox" class="country"> Turkmenistan
</label>
<label>
<input type="checkbox" class="country"> Azerbaijan
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-country").click(function() {
// Use the ".each()" API to iterate over the
// countries and alternate them between "checked"
// and "unchecked".
$('input.country').each(function () {
this.checked = !this.checked;
});
});
});
</script>
</body>
</html>
Ausgang:
Toggle Checkboxes mit der Methode .trigger()
Die Verwendung der Methode .trigger() zum Umschalten von Kontrollkästchen funktioniert anders als die Verwendung von .prop() und .each(). Dieses Mal verwenden wir die Methode .trigger(), um eine Klickfunktion auf alle Checkboxen auszuführen, wenn Sie auf die erste Checkbox klicken.
Eine andere Möglichkeit besteht darin, die Methode .click() für jedes Kontrollkästchen aufzurufen; beides funktioniert gut.
Aber wir haben das als Kommentar im Code hinterlassen, und Sie können es zu einem späteren Zeitpunkt ausprobieren. Das HTML bleibt gleich, aber die Checkboxen enthalten jetzt die Namen der Top-Websites im Internet.
All dies finden Sie im Codeblock unten, und die Ausgabe in einem Browser folgt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-websites"> Select all websites
</label>
<label>
<input type="checkbox" class="website"> Facebook
</label>
<label>
<input type="checkbox" class="website"> Amazon
</label>
<label>
<input type="checkbox" class="website"> Apple
</label>
<label>
<input type="checkbox" class="website"> Netflix
</label>
<label>
<input type="checkbox" class="website"> Google
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-websites").click(function() {
// Use the ".trigger()"" API to execute the
// click function on each checkbox
$('input.website').trigger('click');
// Another option is to execute the "click"
// API directly on the checkboxes
// $('input.website').click();
});
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn