Wie erstellt man ein Kontrollkästchen mit anklickbarer Beschriftung?

Question

Wie kann ich ein HTML-Kontrollkästchen mit einer Beschriftung erstellen, die angeklickt werden kann (d. h. ein Klick auf die Beschriftung schaltet das Kontrollkästchen ein/aus)?

Answer 1

Methode 1: Etikettenanhänger einwickeln

Das Kontrollkästchen wird in eine label Tag:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Methode 2: Verwenden Sie die for Attribut

Verwenden Sie die for Attribut (entspricht der Checkbox id ):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

ANMERKUNG : Die ID muss auf der Seite eindeutig sein!

Erläuterung

Da die anderen Antworten dies nicht erwähnen, kann ein Etikett bis zu 1 Eingabe enthalten und die for und es wird davon ausgegangen, dass es für die darin enthaltene Eingabe gilt.

Auszug aus w3.org (mit meiner Betonung):

[Das for-Attribut] verknüpft das zu definierende Label explizit mit einem anderen Steuerelement. Wenn vorhanden, muss der Wert dieses Attributs mit dem Wert des Attributs id eines anderen Steuerelements im selben Dokument übereinstimmen. Ist dies nicht der Fall, wird die definierte Bezeichnung mit dem Inhalt des Elements verknüpft.

Um ein Label implizit mit einem anderen Steuerelement zu verknüpfen, das Steuerelement muss innerhalb des Inhalts des Elements LABEL liegen . In diesem Fall darf das LABEL nur Folgendes enthalten eine Kontrollelement. Das Etikett selbst kann vor oder nach dem zugehörigen Steuerelement positioniert werden.

Die Anwendung dieser Methode hat einige Vorteile gegenüber for :

• Es ist nicht notwendig, eine id zu jedem Kontrollkästchen (großartig!).

• Es ist nicht notwendig, das zusätzliche Attribut in der <label> .

• Der anklickbare Bereich der Eingabe ist auch der anklickbare Bereich der Beschriftung, so dass es nicht zwei separate Stellen zum Anklicken gibt, die das Kontrollkästchen steuern können - nur eine, unabhängig davon, wie weit sich die <input> und der eigentliche Beschriftungstext sind, und unabhängig davon, welche Art von CSS Sie darauf anwenden.

Demo mit etwas CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Answer 2

Vergewissern Sie sich nur, dass das Etikett mit dem Eingang verbunden ist.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

Answer 3

Sie könnten auch CSS-Pseudo-Elemente verwenden, um Ihre Beschriftungen aus allen Wertattributen Ihrer Kontrollkästchen auszuwählen und anzuzeigen.
Bearbeiten: Dies funktioniert nur mit Webkit- und Blink-basierten Browsern (Chrome(ium), Safari, Opera....) und somit den meisten mobilen Browsern. Keine Firefox oder IE-Support hier.
Dies kann nur nützlich sein, wenn Sie Webkit/Blink in Ihre Anwendungen einbetten.

Alle Pseudo-Elementbeschriftungen werden anklickbar sein.

[type=checkbox]:after {
  content: attr(value);
  margin: -3px 15px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
}

<input type="checkbox" value="My checkbox label value" />

Demo: http://codepen.io/mrmoje/pen/oteLl , + Das Wichtigste in Kürze

Answer 4

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

Answer 5

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>