HTMLInputElement.indeterminate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.indeterminate

Beschreibung

Die Eigenschaft indeterminate ist ein boolescher Wert, mit dem sich ein Kontrollkästchen in einen dritten, unbestimmten Zustand versetzen lässt. Browser zeigen es dann meist mit einem waagerechten Strich statt eines Häkchens an. Typischer Einsatz ist ein „Alle auswählen“-Kontrollkästchen, wenn nur ein Teil der untergeordneten Kontrollkästchen markiert ist, oder ein Baum mit teilweise ausgewählten Knoten.

Wichtig: indeterminate ist ein rein visueller Zustand. Er hat keinen Einfluss auf checked und auch nicht darauf, was beim Absenden eines Formulars übertragen wird. Ob der Wert gesendet wird, hängt weiterhin nur von checked ab.

Es gibt kein HTML-Attribut für diesen Zustand. Er lässt sich nur per JavaScript setzen. Klickt der Nutzer auf das Kontrollkästchen, setzt der Browser indeterminate automatisch auf false und schaltet checked wie gewohnt um. Mit CSS lässt sich der Zustand über die Pseudoklasse :indeterminate ansprechen.

Bei Radiobuttons wird die Eigenschaft ebenfalls gespeichert, ändert aber deren Aussehen nicht. Die Pseudoklasse :indeterminate passt bei Radiobuttons stattdessen dann, wenn in der Gruppe keiner ausgewählt ist. Bei anderen type-Werten hat die Eigenschaft keine Wirkung.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` versetzt das Kontrollkästchen in den unbestimmten Zustand, `false` hebt ihn auf. Werte, die kein Boolean sind, werden in einen Boolean umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element gerade im unbestimmten Zustand ist, sonst false.

Beispiele

Unbestimmten Zustand setzen und lesen

const box = document.createElement('input');
box.type = 'checkbox';
document.body.append(box);

box.indeterminate = true;
console.log(box.indeterminate); // true
console.log(box.checked);       // false – unabhängig davon

true false

„Alle auswählen“-Kontrollkästchen mit Teilauswahl

// HTML:
// <input type="checkbox" id="all"> Alle
// <input type="checkbox" class="item"> A
// <input type="checkbox" class="item"> B
// <input type="checkbox" class="item"> C
const all = document.querySelector('#all');
const items = [...document.querySelectorAll('.item')];

const updateMaster = () => {
  const checkedCount = items.filter((i) => i.checked).length;
  all.checked = checkedCount === items.length;
  all.indeterminate = checkedCount > 0 && checkedCount < items.length;
};

items.forEach((i) => i.addEventListener('change', updateMaster));

all.addEventListener('change', () => {
  // Ein Klick hebt indeterminate automatisch auf
  items.forEach((i) => { i.checked = all.checked; });
});

updateMaster();

Zustand per CSS gestalten und beim Klick prüfen

// CSS: input:indeterminate + label { color: gray; font-style: italic; }
const box = document.querySelector('#newsletter');
box.indeterminate = true;

box.addEventListener('click', () => {
  // Nach dem Klick ist indeterminate bereits false
  console.log(box.indeterminate, box.checked);
});

false true

// Wichtig · Fallstricke

Kein HTML-Attribut: <input indeterminate> hat keine Wirkung. Den Zustand kann man nur per Skript setzen. Nach einem Neuladen der Seite oder bei serverseitigem Rendern muss er deshalb erneut gesetzt werden.
Kein Formularwert: Beim Absenden zählt nur checked. Wer den dritten Zustand an den Server melden will, braucht dafür ein eigenes Feld, z. B. <input type="hidden">.
Klickverhalten: Ein Klick setzt indeterminate auf false. Ruft ein click-Handler preventDefault() auf, stellt der Browser checked und indeterminate wieder auf die vorherigen Werte zurück.
Barrierefreiheit: Screenreader melden den Zustand bei nativen Kontrollkästchen meist als „teilweise ausgewählt“. Bei selbst gebauten Kontrollkästchen stattdessen aria-checked="mixed" verwenden.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Das Aussehen des unbestimmten Zustands unterscheidet sich je nach Browser und Betriebssystem.

Siehe auch

HTMLInputElement.dirName HTMLInputElement.formEnctype HTMLInputElement.formNoValidate HTMLInputElement.minLength HTMLInputElement.pattern