Kontrollkästchen in HTML aktivieren und deaktivieren

1. Kontrollkästchen in HTML
2. Verwenden Sie das Attribut checked, um ein Kontrollkästchen standardmäßig in HTML zu aktivieren
3. Verwenden Sie das Attribut disabled, um ein Kontrollkästchen standardmäßig in HTML zu deaktivieren

In diesem Artikel werden Möglichkeiten zum Aktivieren und Deaktivieren des Kontrollkästchens in HTML untersucht.

Kontrollkästchen in HTML

Ein Kontrollkästchen ist ein interaktives Kästchen, das umgeschaltet werden kann, um eine Bestätigung oder Verneinung anzuzeigen. Es wird häufig in Formularen und Dialogfeldern verwendet.

Kontrollkästchen werden verwendet, wenn es einige Optionen gibt, und der Benutzer kann beliebig viele Optionen auswählen, einschließlich Null. Das bedeutet, dass das Aktivieren einer Option nicht automatisch die anderen Optionen deaktiviert.

Ein Kontrollkästchen wird hauptsächlich verwendet, wenn es Optionen gibt, die sich nicht gegenseitig ausschließen. An der Seite jeder Option erscheint ein kleines Kästchen, das umgeschaltet werden kann.

Standardmäßig ist das Feld leer. Ein leeres Kästchen bedeutet Negation, oder der Benutzer hat die Option nicht ausgewählt.

Wenn Sie darauf klicken, erscheint ein Häkchen innerhalb des Kästchens. Das Häkchen zeigt eine Bestätigung an.

Beim erneuten Anklicken verschwindet das Häkchen.

Sie können ein Kontrollkästchen in HTML erstellen, indem Sie das Tag <input> verwenden und dessen Attribut type auf checkbox setzen. Sie können den Elementnamen nach dem <input>-Tag schreiben.

Erstellen Sie beispielsweise eine ungeordnete Liste mit dem Tag ul und setzen Sie style auf list-style: none; sodass bei den Listenelementen keine Aufzählungszeichen angezeigt werden. Erstellen Sie vier Listenelemente und erstellen Sie mit <input type="checkbox"> ein Kontrollkästchen für jedes Listenelement.

Codebeispiel:

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

Jedes Listenelement hat standardmäßig die Umschaltfunktion in seinem jeweiligen Kontrollkästchen.

Verwenden Sie das Attribut checked, um ein Kontrollkästchen standardmäßig in HTML zu aktivieren

Wenn Sie ein Kontrollkästchen benötigen, bei dem eine Option standardmäßig immer aktiviert ist, können Sie ein Attribut in das <input>-Tag implementieren. Das zu verwendende Attribut ist das Attribut checked.

Sie müssen nur den Wert des Attributs auf checked setzen, damit es standardmäßig aktiviert ist.

Fügen Sie beispielsweise für die Optionen Getränk und Wiederholen das Attribut geprüft hinzu und setzen Sie seinen Wert auf "geprüft". Dadurch wird sichergestellt, dass das Kontrollkästchen dieser beiden Werte standardmäßig aktiviert ist.

Beispielcode:

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

Die aktivierten Optionen können jederzeit mit einem Klick deaktiviert werden.

Wir können auch nur checked verwenden, um die gleiche Ausgabe zu erhalten.

Beispielcode:

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

Verwenden Sie das Attribut disabled, um ein Kontrollkästchen standardmäßig in HTML zu deaktivieren

Um ein Kontrollkästchen standardmäßig in HTML zu deaktivieren, können Sie ein Attribut namens disabled verwenden. Wenn Sie den Wert des Attributs disabled auf disabled setzen, wird der Benutzer daran gehindert, das Kontrollkästchen zu aktivieren.

Betrachten Sie das folgende Beispiel.

Beispielcode:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

Aus der Ausgabe geht hervor, dass nur zwei der vier Optionen eine Umschaltfunktion haben. Essen und Code können umgeschaltet werden, um ein Häkchen anzuzeigen, Trinken und Wiederholen jedoch nicht.

Die Optionen Trinken und Wiederholen sind standardmäßig deaktiviert. Wenn wir das Kontrollkästchen neben den Optionen Trinken und Wiederholen anklicken, reagiert das Kontrollkästchen nicht auf unseren Klick.

Das macht nur zwei der vier Optionen überprüfbar.

Dasselbe Ergebnis kann auch durch alleinige Verwendung von disabled erzielt werden.

Beispielcode:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

Dies sind also die Möglichkeiten zum Aktivieren oder Deaktivieren von Kontrollkästchen in HTML.