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 / deaktiviert wird)?

Methode 1: Etikettenetikett umwickeln

Schließen Sie das Kontrollkästchen in ein labelTag ein:

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

Methode 2: Verwenden Sie das forAttribut

Verwenden Sie das forAttribut (stimmen Sie mit dem Kontrollkästchen überein id):

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

HINWEIS : Die ID muss auf der Seite eindeutig sein!

Erläuterung

Da die anderen Antworten dies nicht erwähnen, kann eine Beschriftung bis zu 1 Eingabe enthalten und das forAttribut weglassen , und es wird angenommen, dass es sich um die darin enthaltene Eingabe handelt.

Auszug aus w3.org (mit meinem Schwerpunkt):

[Das for-Attribut] ordnet die zu definierende Bezeichnung 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. Wenn nicht vorhanden, wird die zu definierende Bezeichnung dem Inhalt des Elements zugeordnet.

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

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

• Sie müssen nicht idjedem Kontrollkästchen ein zuweisen (großartig!).

• Das zusätzliche Attribut in der muss nicht verwendet werden <label>.

• Der anklickbare Bereich der Eingabe ist auch der anklickbare Bereich des Etiketts. Es gibt also keine zwei separaten Klickstellen, die das Kontrollkästchen steuern können - nur eine, unabhängig davon, wie weit der <input>und der tatsächliche Etikettentext voneinander entfernt sind und welche Art von CSS Sie verwenden bewerben Sie sich darauf.

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>

Stellen Sie einfach sicher, dass die Beschriftung der Eingabe zugeordnet 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>

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 damit den meisten mobilen Browsern. Keine 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 Pseudoelementbeschriftungen können angeklickt werden.

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

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

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

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>

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>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Verwenden Sie das labelElement und das forAttribut, um es dem Kontrollkästchen zuzuordnen:

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

In Winkelmaterialetikett mit Kontrollkästchen

<mat-checkbox>Check me!</mat-checkbox>

Benutze das

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


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});