jQuery
Kontrollkästchen Alle auswählen, wenn andere Kontrollkästchen geändert werden sollen
Suche…
Einführung
Ich habe verschiedene Stackoverflow-Beispiele und -Antworten verwendet, um zu diesem wirklich einfachen Beispiel zu gelangen, wie das Kontrollkästchen "Alle auswählen" in Verbindung mit einem automatischen Aktivieren / Deaktivieren des Status des Gruppen-Kontrollkästchens geändert wird. Einschränkung: Die "Alle auswählen" -ID muss mit den Eingabenamen übereinstimmen, um die Gruppe "Alle auswählen" zu erstellen. Im Beispiel lautet die Eingabe select all ID cbGroup1. Die Eingabenamen sind auch cbGroup1
Der Code ist sehr kurz, nicht viel if-Anweisung (zeit- und ressourcenintensiv).
2 Markieren Sie alle Kontrollkästchen mit den entsprechenden Kontrollkästchen
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>
<input id="cbGroup1" type="checkbox">Select all
<input name="cbGroup1" type="checkbox" value="value1_1">Group1 value 1
<input name="cbGroup1" type="checkbox" value="value1_2">Group1 value 2
<input name="cbGroup1" type="checkbox" value="value1_3">Group1 value 3
</p>
<p>
<input id="cbGroup2" type="checkbox">Select all
<input name="cbGroup2" type="checkbox" value="value2_1">Group2 value 1
<input name="cbGroup2" type="checkbox" value="value2_2">Group2 value 2
<input name="cbGroup2" type="checkbox" value="value2_3">Group2 value 3
</p>
<script type="text/javascript" language="javascript">
$("input").change(function() {
$('input[name=\''+this.id+'\']').not(this).prop('checked', this.checked);
$('#'+this.name).prop('checked', $('input[name=\''+this.name+'\']').length === $('input[name=\''+this.name+'\']').filter(':checked').length);
});
</script>
Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow
