Comment créer une case à cocher avec une étiquette cliquable?

Comment puis-je créer une case à cocher HTML avec une étiquette cliquable (cela signifie que cliquer sur l'étiquette active / désactive la case à cocher)?

Méthode 1: envelopper l'étiquette d'étiquette

Enveloppez la case à cocher dans une labelbalise:

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

Méthode 2: utilisez l' forattribut

Utilisez l' forattribut (faites correspondre la case à cocher id):

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

REMARQUE : l'ID doit être unique sur la page!

Explication

Puisque les autres réponses ne le mentionnent pas, une étiquette peut inclure jusqu'à 1 entrée et omettre l' forattribut, et on supposera que c'est pour l'entrée en son sein.

Extrait de w3.org (avec emphase):

[L'attribut for] associe explicitement l'étiquette en cours de définition à un autre contrôle. Lorsqu'il est présent, la valeur de cet attribut doit être la même que la valeur de l'attribut id d'un autre contrôle dans le même document. En cas d'absence, l'étiquette en cours de définition est associée au contenu de l'élément.

Pour associer une étiquette à un autre contrôle implicitement, l'élément de contrôle doit se trouver dans le contenu de l'élément LABEL . Dans ce cas, LABEL ne peut contenir qu'un seul élément de contrôle. L'étiquette elle-même peut être positionnée avant ou après le contrôle associé.

L'utilisation de cette méthode présente certains avantages par rapport à for:

• Pas besoin d'attribuer un idà chaque case à cocher (super!).

• Pas besoin d'utiliser l'attribut supplémentaire dans le <label>.

• La zone cliquable de l'entrée est également la zone cliquable de l'étiquette, il n'y a donc pas deux endroits distincts pour cliquer qui peuvent contrôler la case à cocher - un seul, peu importe la distance entre le <input>texte de l'étiquette et le texte réel, et quel que soit le type de CSS que vous appliquer à elle.

Démo avec du 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>

Assurez-vous simplement que l'étiquette est associée à l'entrée.

<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>

Vous pouvez également utiliser des pseudo-éléments CSS pour sélectionner et afficher vos étiquettes à partir de tous les attributs de valeur de votre case à cocher (respectivement).
Edit: Cela ne fonctionnera qu'avec les navigateurs webkit et blink (Chrome (ium), Safari, Opera ....) et donc la plupart des navigateurs mobiles. Pas de support Firefox ou IE ici.
Cela peut être utile uniquement lors de l'intégration de webkit / blink dans vos applications.

<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>

Toutes les étiquettes de pseudo-élément seront cliquables.

Démo: http://codepen.io/mrmoje/pen/oteLl , + l'essentiel

<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 />

Ça marche aussi:

<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>

Cela devrait vous aider: 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" />

Utilisez l' labelélément et l' forattribut pour l'associer à la case à cocher:

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

Dans l'étiquette de matériau angulaire avec case à cocher

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

Utilisez ceci

<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');
    });
});