HTML-Checkboxen: Mehrere Werte, required und indeterminate

HTML <input type="checkbox"> erlaubt es, jede Option unabhängig auszuwählen oder abzuwählen. Nur angekreuzte Felder senden ihren Namen und Wert; eine nicht angekreuzte Option wird aus den übermittelten Daten ausgelassen, anstatt als falsch oder als leere Zeichenkette gesendet zu werden.

Lesen Sie mehrere Werte mit demselben Namen

Im Gegensatz zu Optionsfeldern können Kontrollkästchen mit demselben name zusammen ausgewählt werden. Ihre Werte wiederholen sich unter einem Namen, also lesen Sie alle aus. Verwenden Sie getAll bei einer JavaScript-FormData-Instanz und prüfen Sie die Regeln Ihres Server-Frameworks für den Umgang mit mehreren Werten.

name identifiziert das Feld; value ist das, was beim Auswählen übermittelt wird. Wenn der Wert weggelassen wird, wird der Standardwert on verwendet, also geben Sie Werte an, um die Optionen zu unterscheiden. Geben Sie jedem Kontrollkästchen ein eindeutiges id für sein Label.

Vollständiges Beispiel: Mehrfachauswahl, erforderliche Auswahl und ausgeschlossene Einträge

Speichern Sie diesen Code als checkbox-demo.html und öffnen Sie ihn in einem Browser. Er zeigt die tatsächlichen Formulareinträge an, anstatt sie an einen Server zu senden. Vergleichen Sie, wie eine deaktivierte Option ausgeschlossen wird, selbst wenn sie ausgewählt ist.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übermittelte Checkbox-Werte</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>Checkboxen üben</h1>
  <form id="demo">
    <fieldset>
      <legend>Gewünschte Farben (Mehrfachauswahl)</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">Blau</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">Rot</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">Grün (deaktiviert)</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">Bereit für die Übung (erforderlich)</label>
    </p>
    <button type="submit">Werte anzeigen</button>
    <button type="reset">Zurücksetzen</button>
    <button type="button" id="partial">Blau als teilweise ausgewählt anzeigen</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>

1. Senden Sie das Formular, ohne das Bereitschafts-Kontrollkästchen auszuwählen: die erforderliche Validierung blockiert die Übermittlung.
2. Wählen Sie Bereit zum Senden und Rot, dann absenden. Die Ausgabe enthält color=blue, color=red und ready=yes; das deaktivierte Grün wird ausgeschlossen.
3. Wählen Sie Blau und Rot ab und senden Sie erneut. Die color-Einträge fehlen; nur ready=yes bleibt.
4. Zurücksetzen stellt Blau und Grün wieder als ausgewählt her, während Rot und Bereit auf nicht ausgewählt zurückgesetzt werden.

Unterscheiden Sie zwischen ausgewählt, erforderlich und unbestimmt

Das checked-Attribut gibt die anfängliche Auswahl an. Lesen Sie den aktuellen Zustand mit der JavaScript checked-Eigenschaft aus. checked="false" hat das Attribut weiterhin; lassen Sie es für ein zunächst nicht markiertes Kästchen weg. Zurücksetzen stellt die Anfangswerte wieder her, anstatt jedes Kästchen zu leeren.

Ein Kontrollkästchen mit required muss selbst markiert sein. Es bedeutet nicht, dass irgendein Kästchen mit demselben Namen ausreicht. Eine „mindestens eines davon“-Bedingung benötigt separate Validierung und Anleitung.

indeterminate ist eine JavaScript-Eigenschaft, die einen Zustand der Teilselektion anzeigt. Sie wird nicht über ein HTML-Attribut gesetzt und ist unabhängig von checked, das die Übermittlung bestimmt. Nach dem Zurücksetzen drücken Sie die Teilanzeige-Schaltfläche, wählen das erforderliche Bereitschafts-Checkbox aus und prüfen die Werte: Blau wird immer noch übermittelt. Die Teilanzeige löscht nicht checked und erzeugt keinen dritten übermittelten Wert.

Fehlende oder mehrere Werte auf dem Server behandeln

Jede fehlende nicht angekreuzte Option als Fehler zu behandeln oder nur den letzten Wert eines mehrfach vorhandenen Namens zu lesen, kann die beabsichtigte Bedeutung ändern. Unterscheiden Sie „nichts ausgewählt“ von einer ungültigen Anfrage anhand der Regeln Ihrer Anwendung und validieren Sie erlaubte Werte auf dem Server.

PHP kann name="color[]" als Array empfangen, aber dies folgt den Regeln des Server-Parsers. Ein Browser sendet nicht für jede Programmiersprache ein universelles Array-Objekt. Überprüfen Sie, ob der empfangene Wert ein Array ist, und behandeln Sie fehlende Werte, verschachtelte Arrays und nicht erlaubte Werte. Siehe die PHP-Dokumentation zu externen Variablen für Parsing-Regeln und die MDN-Checkbox-Referenz für das Verhalten von Checkboxen.