So erstellen Sie ein Kontrollkästchen mit einem anklickbaren Beschriftung?

Wie kann ich erstellen Sie eine HTML-checkbox mit einem label, das anklickbar ist (das bedeutet, dass ein Klick auf das label stellt die checkbox an/aus)?

InformationsquelleAutor laurent | 2011-06-09
  1. 1794

    Methode 1: Wrap-Label-Tag

    Wickeln Sie das Kontrollkästchen innerhalb einer label tag:

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

    Methode 2: Verwenden Sie die for Attribut

    Verwenden Sie die for Attribut (entspricht der checkbox id):

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

    HINWEIS: ID muss einmalig sein auf der Seite!

    Erklärung

    Da die anderen Antworten gar nicht erwähnen, es, ein label kann bis zu 1 input-und auslassen der for Attribut, und es wird davon ausgegangen, dass es für die Eingabe innerhalb es.

    Auszug aus w3.org (meine Hervorhebung):

    [Das Attribut] explizit verknüpft das label definiert sind, mit einem anderen Steuerelement. Wenn vorhanden, wird der Wert dieses Attributs muss der gleiche sein wie der Wert des id-Attributs für ein Element im selben Dokument. , Wenn nicht vorhanden, wird das Etikett definiert, ist im Zusammenhang mit dem Inhalt des Elements.

    Zuordnen, eine Beschriftung mit einem anderen Steuerelement implizit, das control-element muss innerhalb des Inhalts des LABEL-Elements. In diesem Fall, das LABEL darf nur enthalten eine control element. Das label selbst kann sich vor oder nach dem zugehörigen Steuerung.

    Mit dieser Methode hat einige Vorteile gegenüber for:

    • Keine Notwendigkeit zu vergeben id zu jeder checkbox (toll!).

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

    • Die Eingabe der klickbare Bereich ist auch die Bezeichnung klickbaren Bereich, es gibt also nicht zwei getrennte Orte auf, die zur Steuerung des Kontrollkästchen - nur eine, egal wie weit auseinander die <input> und tatsächliche label-text sind, und egal, welche Art von CSS, die Sie anwenden, um es.

    Demo mit einigen CSS:

    CSS:

    label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

    HTML:

    <label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

    • Liebe es, aber bitte die edit wieder. Das ist nur gut für die Checkboxen. Lassen Sie uns nicht dazu, die Leute zu wickeln, deren andere Eingänge mit den Bezeichnungen, denn das bricht das grid-system und mobile Reaktionsfähigkeit schwerer zu bekommen
    • Vielen Dank für diese, ich nahm einen größeren Schritt und erstellt ein checkbuttonwerden, ohne dafür die checkbox selbst. Ich Frage mich nur, wenn es einen Weg gibt, um nur mit CSS...
    • Wenn jemand erklären kann, der Kommentar @John linken Sie bitte zu tun, denn es macht überhaupt keinen Sinn für mich.
    • href="http://getbootstrap.com/css/#forms" >getbootstrap.com/css/#forms - don ' T wrap-Eingänge mit <label> wenn macht die Dinge schwieriger für mobile Reaktionsfähigkeit
    • das ist eine markup-guide speziell für bootstrap. Wenn Sie nicht mit einem Rahmen, oder verwenden Sie ein anderes, es sollte völlig in Ordnung. Danke für die Antwort.
    • Die "for" - Methode funktioniert nicht, wenn die label und input sind in separaten TD ' s in einer Tabelle. Vielleicht haben Sie die gleichen übergeordneten element - ich wollte nicht Experimentieren, aber das wäre sinnvoll
    • Auf der Seite, die Sie verknüpfen, bootstrap Beispiele alle wrap checkbox mit label, weiß ich nicht sehen, keine Warnungen, wie Sie angeben an alle, vielleicht nicht mehr relevant, um die neuesten bootstrap.
    • Wie ich heute gelernt, nicht mischen Sie die Methode 1 und Methode 2. Wenn Sie wickeln Sie die checkbox, ein label UND den, dann Klick auf das label wird nicht ausgelöst, die checkbox.
    • Wie kann das label "positioniert werden, vor oder nach dem zugehörigen control", wenn es umschließt die Steuerung? @WesleyMurch
    • bezogen auf den label-text selbst.

    InformationsquelleAutor Wesley Murch
  2. 50

    Nur stellen Sie sicher, dass das Etikett ist verbunden mit dem Eingang.

    <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>
    • Ich bin verwirrt durch die Tatsache, dass Sie gab den beiden Checkboxen den gleichen Namen und unterschiedlichen Werten. Ist das Absicht?
    • Ja, das ist, wie Sie erstellen, checkbox-Gruppen.
    • Danke. Ich war auf der Suche auf w3.org/wiki/HTML/Elements/input/checkbox und es war nicht hilfreich in dieser Hinsicht.
    • Mit PHP, nicht machen, dass $_POST['foo'] immer einer der beiden Werte maximal auf einmal? Auch wenn beide aktiviert. Was ist eine checkbox-Gruppe?
    • Ja, PHP ist komisch (und nahezu einzige) so. Es gibt keine Erwähnung von PHP verwendet wird, in die Frage bzw. die Antwort, aber so ist es egal.
    • Für php man richtig damit umgeht, dann müssen Sie die eckigen Klammern um den Namen, die e.g: <input type="checkbox" name="foo[]" value="bar" ...>. Dadurch erhalten Sie ein array, das die Werte enthält, die von der aktiviert Boxen (mit diesem Namen). Zum Beispiel $_POST['foo'][0] könnte bar und $_POST['foo'][1] könnte baz (wenn beide aktiviert sind).

    InformationsquelleAutor Quentin
  3. 12

    Konnte man auch mit CSS pseudo-Elementen zu wählen, und zeigen Sie Ihre Etiketten aus allen checkbox-value-Attribute (jeweils).

    Edit: Dies funktioniert nur mit webkit und blink-basierte Browser (Chrome(ium), Safari, Opera....) und so sind die meisten mobilen Browser. Keine Firefox oder IE-Unterstützung hier.

    Dies kann nur nützlich sein, wenn das einbetten von webkit/blink auf Ihre apps.

    <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-element labels werden anklickbar.

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

    • Diese Lösung funktioniert nicht mit IE. Geprüft auf IE11
    • Es funktioniert nicht in Firefox entweder.
    • Wahr. Gecko und Trident und gecko nicht scheinen es zu mögen. Dies funktioniert mit Webkit und Blink nur. Ich werde aktualisieren, die Antwort
    • Downvoted. Es ist zwar möglich, es ist eine schlechte Art und Weise - funktioniert nicht in vielen Browsern, nicht gut für die Barrierefreiheit.
    • Kompatibilitätsprobleme beiseite, diese Lösung ist nicht als semantische, wie die top-Antwort, weil es keine direkte Verbindung im markup-Code zwischen <label> und <input>
    • Das "es funktioniert auf Webkit/Blink" riecht wie ein bug-using ( stackoverflow.com/questions/2587669/...), so kann es aufhören arbeiten jederzeit.

    InformationsquelleAutor moje
  4. 7
    <label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
    InformationsquelleAutor Dave Kiss
  5. 3
    <label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
    • Da kann es verwirrend sein, für manche Leser, sollten Sie die name - Attribut den Wert auf etwas anderes als der Wert, der vorhanden ist, in der for und id Attribute, da diese beiden verwandt sind, in der Erwägung, dass name ist nicht (es ist aber trotzdem zwingend erforderlich, um aufgenommen werden, ich glaube aber dennoch).
    InformationsquelleAutor ShaneBlake
  6. 3

    Funktioniert es 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>
    • Sie können ommit die for und id Attribute in deinem Beispiel, da die label - tag hat nur ein input-element drin.
    InformationsquelleAutor Mystral
  7. 2

    Diese sollten dir helfen: W3Schools - 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>
    InformationsquelleAutor John
  8. 1
    <label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
    InformationsquelleAutor Christopher Armstrong
  9. 0

    Verwenden Sie die label element, und die for - Attribut zu verknüpfen es mit der checkbox:

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

    InformationsquelleAutor James Allardice
  10. -6

    Verwenden Sie diese

    <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');
    });
});
    • Nicht erforderlich, JavaScript zu verwenden, um dies zu tun. Es ist gebaut in HTML.
    • wenn nur es war einfach nur JavaScript, sondern die gesamte jQuery-Bibliothek ist erforderlich für diese zu arbeiten. Mal sehen, ob jemand mit oben kommen kann eine Eckige 2-Lösung.
    InformationsquelleAutor Anni
Schreibe einen Kommentar