Checkbox
Eine
(engl. 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.
Die Anweisung, eine Checkbox zu aktivieren, bedeutet Markieren durch Mausklick, um damit die dahinterstehende Funktion zu aktivieren.
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.[1][2]
Funktionsweise
Es gibt sechs mögliche Zustände, die eine Checkbox annehmen kann:
- nicht markiert (nein/falsch/aus/0)
- markiert (ja/wahr/ein/1)
- teilmarkiert (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).
- deaktiviert und gleichzeitig markiert. Deaktivierte Checkboxen werden verwendet, wenn eine andere Auswahl der Checkboxen nicht möglich ist. Der Auswahlstatus wird vom Anwendungsprogramm vorgegeben und nur der Information halber angezeigt.
- deaktiviert und gleichzeitig nicht markiert
- deaktiviert und gleichzeitig teilmarkiert (weder ja noch nein)
Mit jedem Mausklick 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. Manchmal wird sie durch die Software deaktiviert (Zustand 4). Das geschieht in Sonderfällen, zum Beispiel wenn eine Auswahl an einer anderen Stelle die Option beeinflusst, und folgendermaßen dargestellt:
- 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;
- die Checkbox wird vollends 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.
Einbinden lassen sich Checkboxen auf Websites mittels des HTML-Tags <input type="checkbox">
. Indem man den Input-Tag um die Attribute checked
, disabled
oder beide ergänzt, werden die Kästchen angewählt, nicht anwählbar (ausgegraut) oder angewählt und nicht editierbar.
Der Zweck ausgegrauter Kontrollkästchen ist es, dem Benutzer trotz zeitweiliger Nichtverfügbarkeit dessen Existenz mitzuteilen.
Erscheinungsbild
Das Aussehen variiert je nach eingesetztem Skin. Die häufigste Variante ist ein Quadrat, im ausgewählten Zustand mit einem Kreuz oder Häkchen. Auch bei den deaktivierten Zuständen gibt es verschiedene Designs, meist ist der Kasten in einer anderen Farbe hinterlegt.
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 Eigenschaften zusammengefasst werden. Teilausgewählte Checkboxen werden meist mit einem Rechteck statt des Häkchens dargestellt. Insbesondere bei älteren Skins können Checkboxen hierbei auch das normale Symbol enthalten und farblich abgesetzt sein.
Häufig werden für die Auswahl thematisch zusammengehöriger Optionen mehrere Checkboxen in einer Gruppe zusammengefasst. 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).
Programmierung
C#
Das folgende Beispiel in der Programmiersprache C# zeigt die Implementierung eines Fensters mit Checkboxes und einem Textfeld. Das Klick-Ereignis der Checkboxes ist mit einer Ereignisbehandlungsroutine verknüpft, die die Beschriftung der markierten Checkboxes dem Text in der Textfeld hinzugefügt (siehe Ereignis).[3]
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 MainForms.
public MainForm()
{
InitializeCheckBoxesAndTextBox();
}
// Startet die Anwendung und erzeugt das MainForm 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 die Ereignisbehandlungsmethode jeweils mit dem Klick-Ereignis SelectedIndexChanged der Listenfelder.
Controls.Add(newCheckBox);
checkBoxes[i] = newCheckBox;
}
checkBoxes[0].Text = "Rückwärts suchen";
checkBoxes[1].Text = "Nur ganzes Wort suchen";
checkBoxes[2].Text = "Grosz- 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 MainForms.
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";
}
}
}
}
Siehe auch
Weblinks
- Apple Human Interface Guidelines über Checkboxen (englisch)
- Windows Vista User Experience Guidelines über Checkboxen (englisch)
Einzelnachweise
- ↑ Human Interface Guidelines > Switches. Apple, abgerufen am 4. April 2022 (englisch).
- ↑ Jim Walker, Theano Petersen: Microsoft Docs > Windows App Development > Toggle Switches. Microsoft, 4. Oktober 2021, abgerufen am 4. April 2022 (englisch).
- ↑ Microsoft Docs: CheckBox Class