Wie erstelle ich ein Kontrollkästchen mit einer anklickbaren Beschriftung?
1021
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)?
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.
[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.
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><inputtype="checkbox"name="foo"value="bar"id="foo_bar"><labelfor="foo_bar">Bar</label><inputtype="checkbox"name="foo"value="baz"id="foo_baz"><labelfor="foo_baz">Baz</label></fieldset>
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.
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
<labelfor="vehicle">Type of Vehicle:</label><inputtype="checkbox"id="vehicle"name="vehicle"value="Bike"/>
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). .
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.
Antworten:
Methode 1: Etikettenetikett umwickeln
Schließen Sie das Kontrollkästchen in ein
label
Tag ein:Methode 2: Verwenden Sie das
for
AttributVerwenden Sie das
for
Attribut (stimmen Sie mit dem Kontrollkästchen übereinid
):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
for
Attribut weglassen , und es wird angenommen, dass es sich um die darin enthaltene Eingabe handelt.Auszug aus w3.org (mit meinem Schwerpunkt):
Die Verwendung dieser Methode hat einige Vorteile gegenüber
for
:Sie müssen nicht
id
jedem 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:
quelle
Stellen Sie einfach sicher, dass die Beschriftung der Eingabe zugeordnet ist.
quelle
<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önntebar
und$_POST['foo'][1]
könnte seinbaz
(wenn beide aktiviert sind).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.
Alle Pseudoelementbeschriftungen können angeklickt werden.
Demo: http://codepen.io/mrmoje/pen/oteLl , + Das Wesentliche davon
quelle
quelle
quelle
name
den Wert des Attributs in einen anderen Wert als den in den Attributenfor
und vorhandenen ändernid
, da diese beiden verwandt sind, während diesname
nicht der Fall ist (ich glaube jedoch , dass es immer noch obligatorisch ist, aufgenommen zu werden). .Es funktioniert auch:
quelle
for
undid
in Ihrem Beispiel weglassen , da daslabel
Tag nur ein Eingabeelement enthält.Dies sollte Ihnen helfen: W3Schools - Labels
quelle
quelle
Verwenden Sie das
label
Element und dasfor
Attribut, um es dem Kontrollkästchen zuzuordnen:<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
quelle
In Winkelmaterialetikett mit Kontrollkästchen
quelle
Benutze das
quelle