jQuery / Selector / :checked — Markierte Checkboxen und Radiobuttons auswählen
jQuery :checked findet markierte Checkboxen und Radios sowie ausgewählte Optionen. Begrenzen Sie Typ und Bereich, etwa input[type="checkbox"]:checked. Mehrere Werte werden mit map zum Array; Radiowerte kommen vom markierten Element seiner Namensgruppe.
Zustand und Wert unterscheiden
Die :checked-Referenz umfasst option. Eine formularweite Anzahl muss daher keine Checkboxanzahl sein. Das Beispiel trennt channels und plan; Priority trägt eine Option zur Gesamtzahl bei.
.val() liest unabhängig vom Haken den festgelegten value: unmarkiertes SMS liefert sms. .prop("checked") prüft ein Element, .is(":checked") irgendeinen Treffer in einer Sammlung, .filter(":checked") die Treffer selbst. Ein Property-Getter liest bei mehreren nur das erste.
Radios mit gleichem name im selben Formular bilden eine exklusive Gruppe. Begrenzen Sie auf Formular und Namen. Ohne Auswahl ist die Treffermenge leer und .val() kann undefined liefern.
Vollständiger Vergleich
Speichern und öffnen Sie UTF-8 als checked-demo.html. Internet lädt vollständiges jQuery 4.0.0, ohne Server oder Build. Windows Edge mit 4.0.0 und 3.7.1 prüfte Tastatur, Arrays, deaktivierte Felder, dynamisches change und Reset. Es wird nur angezeigt, nicht gesendet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checked controls and form data</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
fieldset { margin: 12px 0; }
label { display: block; }
button, select { font: inherit; max-width: 100%; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<form id="preferences">
<fieldset id="channels"><legend>Channels</legend>
<label><input id="email" type="checkbox" name="channels" value="email" checked>Email</label>
<label><input id="sms" type="checkbox" name="channels" value="sms">SMS</label>
<label><input type="checkbox" name="channels" value="archive" checked disabled>Archive (disabled)</label>
<fieldset disabled><legend>Unavailable</legend>
<label><input type="checkbox" name="channels" value="legacy" checked>Legacy</label>
</fieldset>
</fieldset>
<fieldset><legend>Plan</legend>
<label><input id="basic" type="radio" name="plan" value="basic" checked>Basic</label>
<label><input id="pro" type="radio" name="plan" value="pro">Pro</label>
</fieldset>
<label for="priority">Priority</label>
<select id="priority" name="priority"><option value="normal">Normal</option><option value="high">High</option></select>
<button type="button" id="choose">Choose SMS and Pro</button>
<button type="button" id="clear">Clear enabled channels</button>
<button type="button" id="restore">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $form = $("#preferences"), form = $form[0];
let changes = 0;
function boxes() { return $form.find('input[type="checkbox"][name="channels"]'); }
function values($elements) { return $elements.map(function () { return this.value; }).get(); }
function render() {
const $checked = boxes().filter(":checked"), data = new FormData(form);
$("#result").text("checkedBoxes=" + JSON.stringify(values($checked)) +
"\nenabledBoxes=" + JSON.stringify(values($checked.filter(":enabled"))) +
"\nradio=" + ($form.find('input[name="plan"]:checked').val() || "(none)") +
"\ncheckedAttributes=" + JSON.stringify(values(boxes().filter("[checked]"))) +
"\nsubmittedChannels=" + JSON.stringify(data.getAll("channels")) +
"\nform=" + new URLSearchParams(data).toString() +
"\nglobalChecked=" + $form.find(":checked").length + "\nchanges=" + changes);
}
$form.on("change", "input, select", function () { changes++; render(); });
$("#choose").on("click", function () {
boxes().filter(":enabled").prop("checked", false);
$("#sms").prop("checked", true).trigger("change");
$("#pro").prop("checked", true).trigger("change");
});
$("#clear").on("click", function () { boxes().filter(":enabled").prop("checked", false).trigger("change"); });
$("#restore").on("click", function () { form.reset(); changes = 0; render(); });
render();
});
</script>
</body>
</html>Anfangs sind drei channels markiert, aber nur Email ist übermittelbar. globalChecked enthält Radio und Option und ist fünf.
checkedBoxes=["email","archive","legacy"]
enabledBoxes=["email"]
radio=basic
checkedAttributes=["email","archive","legacy"]
submittedChannels=["email"]
form=channels=email&plan=basic&priority=normal
globalChecked=5
changes=0- SMS klicken oder mit Leertaste markieren: submittedChannels wird ["email","sms"], beide unter wiederholtem channels-Namen.
- Pro wählen hebt Basic auf und meldet radio=pro, auch per Pfeiltaste über change.
- Reset, dann Choose SMS and Pro: nur SMS ist aktiv markiert, Archive/Legacy bleiben deaktiviert markiert; radio=pro, changes=2.
- checkedAttributes behält die Vorgaben email/archive/legacy.
- Clear enabled channels leert enabledBoxes und submittedChannels, nicht deaktivierte Haken.
- Reset stellt Haken, Radio, Priority und Zähler wieder her.
checkedBoxes sind aktuelle Werte, enabledBoxes ihre :enabled-Teilmenge, submittedChannels echtes FormData.getAll. changes zählt Handlerausführungen, bei mehreren ausgelösten Feldern entsprechend mehrere, keine Benutzerklicks.
Attribut, Eigenschaft und Aktualisierung
[checked] prüft HTML-Attribut, die DOM-checked-Eigenschaft und :checked den aktuellen Zustand. Die Vorgabe hängt mit defaultChecked zusammen und kann nach Abwählen erhalten bleiben. Verwenden Sie [checked] oder .attr("checked")-Wahrheit nicht für aktuelle Haken.
.prop("checked", true oder false) ändert ohne automatisches change. Die Übung löst es explizit aus und rendert anfangs. Bleibt ein Bericht nach programmgesteuerter Änderung alt, prüfen Sie Ereignis-/Renderweg.
change wird vom beständigen Formular an input/select delegiert. Spätere Felder können hochbubbeln; render sucht Checkboxen jedes Mal neu. Eine gespeicherte :checked-Sammlung aktualisiert ihre Mitgliedschaft nicht automatisch.
Reset ruft form.reset() und render auf; id restore vermeidet Verdeckung der Methode. Veränderte Standardattribute oder neue Vorgaben dynamischer Felder ändern das Rücksetzziel.
Deaktivierte Felder und Mehrfachwerte
Eigene disabled-Felder und Nachfahren deaktivierter fieldset können markiert bleiben. :checked beweist keine Übermittelbarkeit. :enabled berücksichtigt geerbte Deaktivierung, FormData lässt Archive/Legacy aus. Nur fehlendes [disabled] zu prüfen übersieht fieldset-Nachfahren.
Unmarkierte Checkboxen und Radios fehlen normalerweise in Formulardaten; sie senden kein automatisches false. Ohne value gilt on. Vergeben Sie sinnvolle Schlüssel und definieren Sie Regeln für fehlende Werte am Server.
FormData.getAll() bewahrt wiederholte Namen. Object.fromEntries mit einem Objektschlüssel kann Werte verlieren. Prüfen Sie Array-Namensregeln des Serverframeworks und erlaubte Werte sowie Kombinationen unabhängig.
:checked funktioniert auch in nativem querySelectorAll. Für Optionen auf option:checked oder jQuery :selected begrenzen. Beim Gestalten tatsächlichen input-Zustand und label-Zuordnung bewahren, damit Farbe und Auswahl übereinstimmen.
