Checkbox

Eine Checkbox (englisch für „Auswahlkasten“, „Kontrollkästchen“, „Markierungsfeld“) ist ein Steuerelement grafischer Benutzeroberflächen. Eine Checkbox dient zur Eingabe und Anzeige von Wahrheitswerten (siehe Boolesche Variable). Es ist üblich, die Auswahlbedingung nicht als Frage, sondern als Aussage zu formulieren (beispielsweise „Ich akzeptiere die Allgemeine Geschäftsbedingungen“ anstelle von „Akzeptieren Sie die Allgemeine Geschäftsbedingungen?“). Checkboxen werden häufig zum Aufbau von interaktiven Checklisten, Auswahl- oder Fragelisten verwendet, wo mehrere Optionen einer Liste angewählt werden können. Im Gegensatz dazu kann bei dem sehr ähnlichen Bedienelement Radiobutton immer nur eine einzige Option ausgewählt werden.

Mit der zunehmenden Verbreitung von Touchscreens und mobilen Endgeräten haben sich in den letzten Jahren Umschalter anstelle von Kontrollkästchen etabliert. Ähnlich wie bei Kontrollkästchen kann zwischen zwei Zuständen (an und aus) gewechselt werden. Die Richtlinien zur Gestaltung von grafischen Benutzeroberflächen von Apple und Microsoft legen übereinstimmend fest, dass sich die Zustandsänderung eines Umschalters sofort auf die App auswirkt, während Zustandsänderungen von Kontrollkästchen explizit (z. B. durch Betätigung einer Schaltfläche „OK“ oder „Übernehmen“) bestätigt werden müssen, bevor sie sich auf die Anwendung auswirken.

Funktionsweise

Drei Checkboxen, alle im aktiven Zustand:
oben: nicht markiert,
Mitte: markiert,
unten: teilmarkiert.

Es gibt sechs mögliche Zustände, die eine Checkbox annehmen kann:

1. nicht markiert (nein, falsch, aus, 0)
2. markiert (ja, wahr, ein, 1)
3. bedingt markiert (weder ja noch nein. Tritt meistens auf, wenn es um die Eigenschaften mehrerer Objekte geht, von denen einige eine bestimmte Eigenschaft besitzen und andere nicht, siehe großes Bild).
4. deaktiviert und gleichzeitig markiert. Deaktivierte Checkboxen werden verwendet, wenn eine andere Auswahl der Checkboxen nicht möglich ist.
5. deaktiviert und gleichzeitig nicht markiert
6. deaktiviert und gleichzeitig bedingt markiert (weder ja noch nein)

ISO 9241-161 beschreibt noch zusätzlich die Zustände fokussiert/nicht fokussiert und bearbeitbar/nur Anzeige.

Mit jedem Klick der primären Maustaste auf die Checkbox kann ihr Zustand zwischen markiert (Zustand 2) und nicht markiert (Zustand 1) sowie gegebenenfalls teilmarkiert (Zustand 3) und zurück gewechselt werden. Alternativ lässt sich eine fokussierte Checkbox auch über die Leertaste betätigen. Manchmal wird sie durch die Software deaktiviert (Zustand 4, 5 oder 6). Das geschieht in Sonderfällen, zum Beispiel wenn eine Auswahl an einer anderen Stelle die Option beeinflusst, und folgendermaßen dargestellt:

Checkboxen in der Praxis – in diesem Beispiel wurden in einem Dateimanager wie dem Windows-Explorer sechs Dateien markiert und anschließend die „Eigenschaften“-Anzeige aufgerufen, was dieses Dialogfenster erzeugte.
Zu sehen ist der Unterschied zwischen bedingt markiert und deaktiviert:
oben: bedingt markiert,
Mitte: deaktiviert (ausgegraut) und gleichzeitig markiert,
unten: normal aktiviert

• Das Feld wird farblich abgehoben (z. B. dunkelgrau hinterlegt), die Box reagiert nicht auf Mausklicks. Dabei bleibt die Vorauswahl (also markiert oder nicht markiert) in vielen Fällen sichtbar. Manchmal wird die Hinterlegung aber auch so gestaltet, dass die Vorauswahl nicht erkennbar ist. Der Zweck deaktivierter bzw. ausgegrauter Kontrollkästchen ist es, dem Benutzer trotz zeitweiliger Nichtverfügbarkeit dessen Existenz mitzuteilen.
• Die Checkbox wird vollständig ausgeblendet.

Meist steht rechts neben der Checkbox eine Beschriftung, die durch Mausklick ebenfalls ein Umschalten der Checkbox bewirkt. Manchmal wird auch die Schrift selbst durch den Mausklick verändert. Ist die Box deaktiviert, so wird in der Regel auch die Schrift abgeschwächt angezeigt.

Häufig werden Kontrollkästchen auch dazu genutzt, um mehrere Einträge in Listenfeldern, Rasteransichten und Baumansichten auszuwählen.

Erscheinungsbild

Das Aussehen variiert je nach eingesetztem Design der grafischen Benutzeroberfläche. Die häufigste Variante ist ein Quadrat, das im markierten Zustand ein Kreuz oder Häkchen beinhaltet. Falls die Checkbox nicht markiert ist, bleibt das Quadrat in der Regel leer. Manchmal soll ein Wert angezeigt werden, der nicht ja und nicht nein entspricht. Dies ist beispielsweise bei Baumansichten der Fall, wenn nur ein Teil der Unterelemente ausgewählt ist. Ähnlich ist es auch bei einem Eigenschaftsdialog, in dem die Eigenschaften mehrerer Objekte mit unterschiedlichen Werten zusammengefasst werden. Bei älteren Designs nutzen bedingt markierten Checkboxen oft das reguläre, jedoch farblich abgesetzte Symbol für den markierten Zustand. Moderne Designs nutzen als Symbol häufig ein kleines ausgefülltes Quadrat oder einem horizontalen Balken.

Zeichenorientierte Benutzeroberflächen (TUI) stellen den markierten Zustand in der Regel als [X], den bedingt markierten Zustand als [-] und den nicht markierten Zustand als [ ] dar.

Häufig werden für die Auswahl thematisch zusammengehöriger Optionen mehrere Checkboxen in einer Gruppe zusammengefasst. ISO 9241-161 schreibt vor, dass Checkboxen innerhalb einer Gestaltungslösung jeweils dasselbe Symbol für den gleichen Zustand anzeigen müssen, also etwa immer ein Häkchen oder ein Kreuz als Indikator. Trotz dieser Zusammenfassung verhalten sich die Checkboxen hierbei unabhängig voneinander. Dies ist der grundlegende Unterschied zu Radiobuttons, bei denen innerhalb einer Gruppe immer nur genau eine Option aktiviert sein kann. Allerdings gibt es hier auch Spezialfälle: es ist zum Beispiel denkbar, dass in einer Gruppe von Checkboxen mindestens eine aktiviert sein muss und folglich das Deaktivieren der letzten aktivierten Checkbox nicht möglich ist. Es kann auch sein, dass die gesamte Gruppe durch eine Checkbox oder einen Radiobutton in der übergeordneten Ebene deaktiviert wird.

Darstellung

Für Hinweise zur Darstellung entsprechender grafischer Symbolen aus Zeichensätzen siehe Artikel Häkchen (Schriftzeichen).

Checkboxen mit und ohne Häkchen bzw. Kreuz sind als Unicode-Zeichen verfügbar:

• ☐ U+2610
• ☑ U+2611
• ☒ U+2612

Programmierung

HTML

Kontrollkästchen können seit HTML 2.0 in Webseiten mit Hilfe des Tags <input type="checkbox"> genutzt werden. Der aktuelle Wert des Kontrollkästchens kann über das boolsche Attribut checked gesetzt und gelesen werden. Seit Version 3.0 können Formularelemente über das boolsche Attribut disabled deaktiviert werden. In HTML5 wurde das boolesche Attribut indeterminate eingeführt. Es ermöglicht die bedingte Markierung der Checkbox.

C#

Das folgende C#-Beispiel verdeutlicht die Nutzung der Klasse System.Windows.Forms.CheckBox aus dem Komponentenframework Windows Forms. Es zeigt die Implementierung eines Fensters mit vier Kontrollkästchen und einem Textfeld. Das Klick-Ereignis der einzelnen Kontrollkästchen ist mit einer gemeinsamen Ereignisbehandlungsroutine verknüpft, die die Beschriftung der markierten Kontrollkästchen dem Text des Textfeldes hinzugefügt.

using System.Windows.Forms;

public class MainForm : System.Windows.Forms.Form
{
	private System.Windows.Forms.CheckBox[] checkBoxes;
	private System.Windows.Forms.TextBox outputTextBox;

	// Konstruktor des Hauptfensters.
	public MainForm()
	{
		InitializeCheckBoxesAndTextBox();
	}

	// Startet die Anwendung und erzeugt das Hauptfenster durch Aufruf des Konstruktors.
    public static void Main()
    {
        Application.Run(new MainForm());
    }

	// Initialisiert die Checkboxes und das Textfeld.
	private void InitializeCheckBoxesAndTextBox()
	{
		// Erzeugt 4 Checkboxes und ein Textfeld durch Aufruf der Standardkonstruktoren.
		int checkBoxesCount = 4;
		checkBoxes = new CheckBox[checkBoxesCount]; // Erzeugt ein Array von Checkboxes.

		SuspendLayout();

		// Diese for Schleife initialisiert die einzelnen Checkboxes des Arrays.
		for (int i = 0; i < checkBoxesCount; i++)
		{
			CheckBox newCheckBox = new CheckBox();
			newCheckBox.Location = new System.Drawing.Point(50, 25 * i + 50);
			newCheckBox.Width = 200;
			newCheckBox.Click += new EventHandler(NewCheckBox_Clicked); // Verknüpft das Klick-Ereignis mit der gemeinsamen Ereignisbehandlungsmethode
			Controls.Add(newCheckBox);
			checkBoxes[i] = newCheckBox;
		}
		checkBoxes[0].Text = "Rückwärts suchen";
		checkBoxes[1].Text = "Nur ganzes Wort suchen";
		checkBoxes[2].Text = "Groß- und Kleinschreibung";
		checkBoxes[3].Text = "Zurück zum Anfang springen";

		outputTextBox = new TextBox();
		outputTextBox.Location = new System.Drawing.Point(50, 25 * checkBoxesCount + 50);
		outputTextBox.Size = new System.Drawing.Size(200, 50);
		outputTextBox.Multiline = true; // Legt fest, dass das Textfeld mehrere Zeilen haben kann und Zeilenumbrüche ermöglicht.
		Controls.Add(outputTextBox);

		Text = "Suchen und Ersetzen"; // Setzt die Beschriftung des Hauptfensters.

		ResumeLayout(false);
		PerformLayout();
	}

	// Diese Methode wird aufgerufen, wenn der Benutzer auf eine Checkbox klickt.
	private void NewCheckBox_Clicked(object sender, System.EventArgs e)
	{
		// Setzt den Text in der Textbox auf die Beschriftung der markierten Checkboxes.
		outputTextBox.Text = string.Empty;
		int checkBoxesCount = checkBoxes.Length;
		for (int i = 0; i < checkBoxesCount; i++)
		{
			CheckBox checkBox = checkBoxes[i];
			// Wenn die Checkbox markiert ist, Beschriftung dem Text im Textfeld hinzufügen.
			if (checkBox.CheckState == CheckState.Checked)
			{
				outputTextBox.Text += checkBox.Text + "\r\n";
			}
		}
	}
}

Weblinks

Commons: Check boxes – Sammlung von Bildern, Videos und Audiodateien

• Apple Human Interface Guidelines über Checkboxen (englisch)
• Microsoft Design Guidelines über Checkboxen für klassische Apps und UWP Apps (englisch)