Wie kann ich implementieren einen "Alle Auswählen" - checkbox in meine ASP.NET MVC-app?
Ich habe eine Tabelle mit einer Spalte voller Checkboxen. An der Spitze würde ich gerne eine einzelne "Select All" - checkbox, die würde überprüfen Sie alle Kontrollkästchen auf dieser Seite.
Wie soll ich dies umsetzen? Ich verwende jQuery als JavaScript-framework, wenn es darauf ankommt.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dadurch halten Sie die einzelnen Kontrollkästchen die gleiche wie die "check all" ein
Dadurch halten Sie die "check all" in sync mit, ob oder ob nicht die einzelnen Checkboxen sind eigentlich alle aufgegebenen oder nicht
jquery (BEARBEITET zu wechseln-check/uncheck all (alle abwählen):
Der Grund, warum ich zu tun hatte
click()
dann prüfenchecked
status ist, weil, wenn Sie versuchen, "toggle
" eine checkbox, die checkbox ausgeschaltet wird wird nicht behält seinen status überprüft. Auf diese Weise behält er den status überprüfen und wirksam schaltet.HTML:
Etwas ändern markup von Marve ' s Antwort (die ID der Tabelle)
Arbeiten Demo →
EDIT:
Aktualisierte version, wo der 'selectAll' checkbox korrekt spiegelt den Zustand der Checkboxen. E. g. wenn Sie wählen Sie alle Checkboxen manuell, selectAll Kontrollkästchen wird automatisch geprüft. Probieren Sie die demo, um zu verstehen, das Verhalten.
Code:
Ihre jQuery könnte so einfach wie diese:
Während die Antworten bisher arbeiten werden, Sie laufen in Probleme, wenn Sie mehr als eine Reihe von Checkboxen auf einer einzigen Seite.
Dieses format funktioniert unabhängig:
und das Skript...
Versuchen, diese Für HTML-Tabelle.
Skript:
Für mich, Jeremy Lösung meist arbeitete, aber ich hatte zu ersetzen
.attr
mit.prop
. Ansonsten mal ich klickte auf ein Markierungsfeld, es würde aufhören, und als Reaktion auf die "master" - Kästchen.in der _Layout.cshtml (master-Seite)
in einem referenzierten .js
in den HTML-Code (Razor) Seite
WICHTIG:
auch, anfangs hatte ich eine
@foreach
Schleife in der HTML und es hat nicht funktioniert... verwenden, müssen Sie einen@for (int i = 0; i < Model.Clients.Count(); i++)
Schleife statt, ansonsten Sie am Ende mit einer leeren Liste imOnPostAsync()
.