webentwicklung-frage-antwort-db.com.de

Wie erstelle ich ein Kontrollkästchen mit einer anklickbaren Beschriftung?

Wie kann ich ein HTML-Kontrollkästchen mit einer Beschriftung erstellen, auf die geklickt werden kann (dies bedeutet, dass durch Klicken auf die Beschriftung das Kontrollkästchen aktiviert bzw. deaktiviert wird)?

htmlcheckboxclicklabel
956
laurent

Methode 1: Wrap Label Tag

Hängen Sie das Kontrollkästchen in ein label -Tag ein:

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

Methode 2: Verwenden Sie das for Attribut

Verwenden Sie das Attribut for (markieren Sie das Kontrollkästchen id):

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

NOTE: ID muss auf der Seite eindeutig sein!

Erläuterung

Da es in den anderen Antworten nicht erwähnt wird, kann ein Label bis zu 1 Eingabe enthalten und das for -Attribut weglassen. Es wird davon ausgegangen, dass es für die Eingabe in diesem Attribut vorgesehen ist.

Auszug aus w3.org (mit meinem Schwerpunkt):

[Das Attribut für] ordnet die Bezeichnung, die definiert wird, explizit einem anderen Steuerelement zu. Wenn vorhanden, muss der Wert dieses Attributs mit dem Wert des id-Attributs eines anderen Steuerelements im selben Dokument übereinstimmen. Bei Abwesenheit wird die zu definierende Bezeichnung dem Inhalt des Elements zugeordnet.

Um eine Beschriftung implizit einem anderen Steuerelement zuzuordnen , muss sich das Steuerelement innerhalb des Inhalts des LABEL-Elements befinden . In diesem Fall darf das LABEL nur ein Steuerelement enthalten. Das Etikett selbst kann vor oder nach der zugehörigen Kontrolle positioniert werden.

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

  • Es ist nicht erforderlich, jedem Kontrollkästchen ein id zuzuweisen (großartig!).

  • Es ist nicht erforderlich, das zusätzliche Attribut in <label> zu verwenden.

  • Der anklickbare Bereich der Eingabe ist auch der anklickbare Bereich der Beschriftung. Es gibt also keine zwei separaten Stellen, an denen das Kontrollkästchen aktiviert werden kann - nur eine, unabhängig davon, wie weit der <input> und der tatsächliche Beschriftungstext voneinander entfernt sind Welche Art von CSS wenden Sie darauf an?.

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>
1803
Wesley Murch

Stellen Sie einfach sicher, dass das Etikett mit der Eingabe 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>
50
Quentin

Sie können auch CSS-Pseudoelemente verwenden, um Ihre Beschriftungen aus allen Wertattributen Ihres Kontrollkästchens auszuwählen und anzuzeigen.
Bearbeiten: Dies funktioniert nur mit Webkit- und Blink-basierten Browsern (Chrome (ium), Safari, Opera ....) und also die meisten mobilen browser. Nein Firefox 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 Pseudoelementbezeichnungen können angeklickt werden.

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

12
moje
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
7
Dave Kiss
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
3
ShaneBlake

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
Mystral

Dies sollte Ihnen helfen: W3Schools - Labels

<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
John
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
1
Christopher Armstrong

Verwenden Sie das Element label und das Attribut for, um es dem Kontrollkästchen zuzuordnen:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

0
James Allardice