Frage So erstellen Sie ein HTML-Kontrollkästchen mit einem anklickbaren Label


Wie kann ich ein HTML-Kontrollkästchen mit einem Label erstellen, das anklickbar ist (das bedeutet, dass beim Klicken auf das Label das Kontrollkästchen aktiviert / deaktiviert wird)?


834
2018-06-09 13:33


Ursprung


Antworten:


Methode 1: Etikettenmarke umhüllen

Wickeln Sie das Kontrollkästchen in a label Etikett:

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

Methode 2: Verwenden Sie die for Attribut

Benutze die for Attribut (passen Sie das Kontrollkästchen an) id):

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

HINWEIS: ID muss auf der Seite eindeutig sein!

Erläuterung

Da die anderen Antworten dies nicht erwähnen, kann ein Label bis zu 1 Input enthalten und das weglassen for Attribut, und es wird angenommen, dass es für die Eingabe darin ist.

Ausschnitt aus w3.org (mit meiner Betonung):

[Das for-Attribut] weist das definierte Label explizit einem anderen Steuerelement zu. Wenn vorhanden, muss der Wert dieses Attributs dem Wert des ID-Attributs eines anderen Steuerelements im selben Dokument entsprechen. Wenn es nicht vorhanden ist, wird das Etikett, das definiert wird, mit dem Inhalt des Elements verknüpft.

Um ein Label implizit einem anderen Steuerelement zuzuordnen, Das Steuerelement muss innerhalb des Inhalts des LABEL-Elements liegen. In diesem Fall darf das LABEL nur enthalten ein Steuerelement. Das Etikett selbst kann vor oder nach dem zugehörigen Steuerelement positioniert sein.

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

  • Keine Notwendigkeit, ein zuzuweisen id zu jeder Checkbox (großartig!).

  • Keine Notwendigkeit, das zusätzliche Attribut in der <label>.

  • Der anklickbare Bereich der Eingabe ist auch der klickbare Bereich der Beschriftung. Es gibt also nicht zwei separate Bereiche, auf die geklickt werden kann, um die Checkbox zu steuern - nur eine, unabhängig davon, wie weit sie entfernt ist <input> und tatsächlicher Etikettentext sind und egal welche Art von CSS Sie 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>


1594
2018-06-09 13:36



Stellen Sie nur sicher, dass das Label mit dem Eingang verknüpft 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>

46
2018-06-09 13:35



Sie können auch CSS-Pseudo-Elemente verwenden, um Ihre Beschriftungen aus allen Wertattributen Ihrer Checkbox auszuwählen bzw. anzuzeigen.
Bearbeiten: Dies funktioniert nur mit Webkit- und blink-basierten Browsern (Chrome (ium), Safari, Opera ....) und damit den meisten mobilen Browsern. Nein Feuerfuchs oder IE-Unterstützung hier.
Dies kann nur nützlich sein, wenn Sie webkit / blink in Ihre Apps einbetten.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Alle Pseudo-Elemente können anklickbar sein.

Demo:http://codepen.io/mrmoje/pen/oteLl, + Das Wesentliche davon


11
2018-01-29 17:07



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

7
2018-06-09 13:36



<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

3
2018-06-09 13:36



Es funktioniert auch:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

3
2017-07-06 10:47



Dies sollte Ihnen helfen: W3Schulen - Etiketten

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

2
2018-06-09 13:44