188.164.235.34: /* Darstellung */ Unicode-Glyphen eingefügt

2023-09-20T09:01:15Z

Darstellung: Unicode-Glyphen eingefügt

Neue Seite

Eine '''{{lang|en|Checkbox}}''' (englisch für „Auswahlkasten“, „Kontrollkästchen“, „Markierungsfeld“) ist ein [[Steuerelement]] [[Grafische Benutzeroberfläche|grafischer Benutzeroberflächen]]. Eine Checkbox dient zur Eingabe und Anzeige von [[Wahrheitswert]]en (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 [[interaktiv]]en [[Checkliste]]n, Auswahl- oder [[Fragenkatalog|Fragelisten]] verwendet, wo mehrere Optionen einer [[Liste (Datenstruktur)|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 [[Touchscreen]]s und mobilen Endgeräten haben sich in den letzten Jahren [[Umschalter (Steuerelement)|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.<ref name="Apple_Toggle_Guidelines">{{Internetquelle |url=https://developer.apple.com/design/human-interface-guidelines/toggles |titel=Toggles |werk=developer.apple.com |hrsg=Apple |sprache=en |abruf=2023-05-12}}</ref><ref name="MS_Learn_Toggle_Switches">{{Internetquelle |autor=Jim Walker, Theano Petersen |url=https://learn.microsoft.com/en-us/windows/apps/design/controls/toggles |titel=Toggle Switches |werk=learn.microsoft.com |hrsg=Microsoft |datum=2021-10-04 |sprache=en |abruf=2022-04-04}}</ref>

== Funktionsweise ==
[[Datei:Drei Checkboxen.jpg|mini|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:<ref>[[ISO 9241]]-161, Nr. 8.4.3</ref>
# ''nicht markiert'' (''nein'', ''falsch'', ''aus'', ''0'')
# ''markiert'' (''ja'', ''wahr'', ''ein'', ''1'')
# ''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).
# ''[[Ausgrauen|deaktiviert]]'' und gleichzeitig markiert. Deaktivierte Checkboxen werden verwendet, wenn eine andere Auswahl der Checkboxen nicht möglich ist.
# ''deaktiviert'' und gleichzeitig nicht markiert
# ''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 [[Mausklick|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:
[[Datei:Dateieigenschaften.png|mini|367px|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 ([[Ausgrauen|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 [[Markierung (Informatik)|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 [[Listenfeld]]ern, [[Rasteransicht]]en und [[Baumansicht]]en auszuwählen.

== Erscheinungsbild ==
Das Aussehen variiert je nach eingesetztem [[Skin (Computer)|Design]] der grafischen Benutzeroberfläche. Die häufigste Variante ist ein [[Quadrat]], das im markierten Zustand ein [[Kreuz (Symbol)|Kreuz]] oder [[Häkchen (Schriftzeichen)|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 Benutzerschnittstelle|Zeichenorientierte Benutzeroberflächen]] (TUI) stellen den markierten Zustand in der Regel als {{nowrap|<code>[X]</code>}}, den bedingt markierten Zustand als {{nowrap|<code>[-]</code>}} und den nicht markierten Zustand als {{nowrap|<code>[ ]</code>}} dar.<ref>''Designing Forms'' > ''Controls Summary'' > ''Check Box Control''. In: ''Microsoft Visual Basic 1.0 for MS-DOS'' (''VBDOS.HLP''). Microsoft, 1992 (englisch).</ref>

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,<ref>ISO 9241-161, Nr. 8.4.5</ref> 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:<ref>{{Internetquelle |url=https://www.unicode.org/charts/PDF/U2600.pdf |titel=The Unicode Standard, Version 15.1, 2600 Miscellaneous Symbols |hrsg=Unicode, Inc. |sprache=en |abruf=2023-09-20}}</ref>

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

== Programmierung ==

=== HTML ===
Kontrollkästchen können seit [[Hypertext Markup Language|HTML]] 2.0 in [[Webseite]]n mit Hilfe des [[Tag (Informatik)|Tags]] <syntaxhighlight lang="html" style="white-space:nowrap" inline><input type="checkbox"></syntaxhighlight> genutzt werden.<ref>{{RFC-Internet |RFC=1866 |Titel=Hypertext Markup Language – 2.0 |Datum=1995-11 |Autor=[[Tim Berners-Lee]], Dan Connolly |Abschnitt=8.1.2.3 |Abschnittstitel=Check Box: INPUT TYPE=CHECKBOX}}</ref> Der aktuelle Wert des Kontrollkästchens kann über das boolsche Attribut <code>checked</code> gesetzt und gelesen werden. Seit Version 3.0 können Formularelemente über das boolsche Attribut <code>disabled</code> deaktiviert werden.<ref>{{Internetquelle |autor=Dave Raggett |url=https://www.w3.org/MarkUp/html3/html3.txt |titel=HyperText Markup Language Specification Version 3.0 |werk=w3.org |hrsg=[[World Wide Web Consortium]] |datum=1995-03-28 |seiten=130 |format=TXT; 372 kB |sprache=en |abruf=2023-05-12}}</ref>
In [[HTML5]] wurde das boolesche Attribut <code>indeterminate</code> eingeführt. Es ermöglicht die bedingte Markierung der Checkbox.<ref>{{Internetquelle |url=https://html.spec.whatwg.org/#dom-input-indeterminate |titel=HTML Living Standard |werk=html.spec.whatwg.org |hrsg=[[Web Hypertext Application Technology Working Group]] |datum=2023-05-10 |sprache=en |abruf=2023-05-12}}</ref>

=== C# ===
Das folgende [[C-Sharp|C#]]-Beispiel verdeutlicht die Nutzung der [[Klasse (Objektorientierung)|Klasse]] <code>System.Windows.Forms.CheckBox</code> aus dem [[GUI-Toolkit|Komponentenframework]] [[Windows Forms]].<ref>{{Internetquelle |url=https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.checkbox |titel=CheckBox Class |werk=learn.microsoft.com |hrsg=Microsoft |sprache=en |abruf=2023-05-12}}</ref> Es zeigt die Implementierung eines [[Fenster (Computer)|Fensters]] mit vier Kontrollkästchen und einem [[Textfeld]]. Das Klick-[[Ereignis (Programmierung)|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.
<syntaxhighlight lang="c#">
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";
}
}
}
}
</syntaxhighlight>

== Weblinks ==
{{Commonscat|Check boxes}}
* [https://developer.apple.com/design/human-interface-guidelines/toggles/#Checkboxes Apple Human Interface Guidelines über Checkboxen] (englisch)
* Microsoft Design Guidelines über Checkboxen für [https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-check-boxes klassische Apps] und [https://learn.microsoft.com/en-us/windows/apps/design/controls/checkbox UWP Apps] (englisch)

== Einzelnachweise ==
<references />

[[Kategorie:Steuerelement einer grafischen Benutzeroberfläche]]

Checkbox - Versionsgeschichte

188.164.235.34: /* Darstellung */ Unicode-Glyphen eingefügt