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

Antworten:

1915

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>

Wesley Murch
quelle
14
Ich liebe es, aber bitte noch einmal bearbeiten. Dies ist nur für Kontrollkästchen gut. Lassen Sie uns die Leute nicht ermutigen, ihre anderen Eingaben mit Beschriftungen zu versehen, da dies das Rastersystem zerstört und die Reaktionsfähigkeit von Mobilgeräten schwieriger zu erreichen ist
Max
1
Wenn jemand den Kommentar erklären kann, den @John hinterlassen hat, tun Sie dies bitte, da er für mich überhaupt keinen Sinn ergibt.
Wesley Murch
16
@ John, das ist eine Markup-Anleitung speziell für Bootstrap. Wenn Sie kein Framework verwenden oder ein anderes verwenden, sollte dies völlig in Ordnung sein. Danke für die Antwort.
Wesley Murch
3
@John. Auf der von Ihnen verlinkten Seite, Bootstrap-Beispiele für alle Wrap-Kontrollkästchen mit Beschriftung, werden keine Warnungen angezeigt, wie Sie angeben. Möglicherweise ist dies für den neuesten Bootstrap nicht mehr relevant.
user2144406
2
Wie ich heute erfahren habe, mischen Sie Methode 1 und Methode 2 nicht. Wenn Sie das Kontrollkästchen in ein Etikett einschließen UND das für einschließen, wird durch Klicken auf das Etikett das Kontrollkästchen nicht ausgelöst.
BBlake
50

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>
QUentin
quelle
1
Ich bin verwirrt darüber, dass Sie den beiden Kontrollkästchen den gleichen Namen und unterschiedliche Werte gegeben haben. Ist das absichtlich?
LarsH
2
@LarsH - Ja, so erstellen Sie Kontrollkästchengruppen.
Quentin
Vielen Dank. Ich habe mir w3.org/wiki/HTML/Elements/input/checkbox angesehen und es war in dieser Hinsicht nicht hilfreich.
LarsH
2
Wird $ _POST ['foo'] mit PHP nicht immer einen der beiden maximalen Werte gleichzeitig haben? Auch wenn beide geprüft sind. Was ist eine Kontrollkästchengruppe?
Jeromej
2
@ JeromeJ: Damit PHP richtig damit umgehen kann, müssen Sie dem Namen eckige Klammern hinzufügen, z <input type="checkbox" name="foo[]" value="bar" ...>. Dadurch erhalten Sie ein Array, das die Werte aller aktivierten Kontrollkästchen (die diesen Namen haben) enthält. Zum Beispiel $_POST['foo'][0]könnte barund $_POST['foo'][1]könnte sein baz(wenn beide aktiviert sind).
Levite
11

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

mrmoje
quelle
Wahr. Gecko und Trident und Gecko scheinen das nicht zu mögen. Dies funktioniert nur mit Webkit und Blink. Ich werde die Antwort aktualisieren
mrmoje
3
Abgestimmt. Es ist zwar möglich, aber ein schlechter Weg - funktioniert nicht in vielen Browsern, nicht gut für die Barrierefreiheit.
James Billingham
Abgesehen von Kompatibilitätsproblemen ist diese Lösung nicht so semantisch wie die Top-Antwort, da es keine direkte Zuordnung im Markup zwischen dem <Label> und dem <Eingang> gibt
Deadboy
Das "es funktioniert mit Webkit / Blink" riecht nach einem Fehler bei der Verwendung von ( stackoverflow.com/questions/2587669/… ), sodass es jederzeit nicht mehr funktioniert.
Xenos
7
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Dave Kiss
quelle
3
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
ShaneBlake
quelle
1
Da dies für einige Leser verwirrend sein kann, sollten Sie nameden Wert des Attributs in einen anderen Wert als den in den Attributen forund vorhandenen ändern id, da diese beiden verwandt sind, während dies namenicht der Fall ist (ich glaube jedoch , dass es immer noch obligatorisch ist, aufgenommen zu werden). .
Dzhuneyt
3

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>
Mystral
quelle
Sie können die Attribute forund idin Ihrem Beispiel weglassen , da das labelTag nur ein Eingabeelement enthält.
Dzhuneyt
2

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

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

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

James Allardice
quelle
0

In Winkelmaterialetikett mit Kontrollkästchen

<mat-checkbox>Check me!</mat-checkbox>
Arunkumar Ramasamy
quelle
-7

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');
    });
});
Anni
quelle
9
Dazu muss kein JavaScript verwendet werden. Es ist in HTML integriert.
Lasse Bunk
4
@LasseBunk, wenn es nur JavaScript wäre, aber die gesamte jQuery-Bibliothek ist erforderlich, damit dies funktioniert. Mal sehen, ob jemand eine Angular 2-Lösung finden kann.
Laurent