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

Question

Comment puis-je créer une case à cocher HTML dont l'étiquette est cliquable (ce qui signifie qu'en cliquant sur l'étiquette, la case à cocher est activée ou désactivée) ?

Answer 1

Méthode 1 : Etiquette enveloppante

Enveloppez la case à cocher dans un label étiquette :

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

Méthode 2 : Utilisez le for Attribut

Utilisez le for (correspond à la case à cocher id ) :

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

NOTE : 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'élément for et il sera supposé qu'il s'agit de l'entrée qu'il contient.

Extrait de w3.org (c'est moi qui souligne) :

[L'attribut for] associe explicitement l'étiquette définie à 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. Lorsqu'elle est absente, l'étiquette définie est associée au contenu de l'élément.

Pour associer une étiquette à un autre contrôle de manière implicite, L'élément de contrôle doit se trouver dans le contenu de l'élément LABEL. . Dans ce cas, l'ÉTIQUETTE ne peut contenir que un é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 :

• Il n'est pas nécessaire d'attribuer un id à chaque case à cocher (génial !).

• Il n'est pas nécessaire d'utiliser l'attribut supplémentaire dans le champ <label> .

• La zone cliquable de l'entrée est également la zone cliquable de l'étiquette, de sorte qu'il n'y a pas deux endroits distincts où cliquer pour contrôler la case à cocher - un seul, quelle que soit la distance entre les boutons de l'étiquette. <input> et le texte réel de l'étiquette, et quel que soit le type de CSS que vous lui appliquez.

Démonstration avec quelques 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>

Answer 2

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>

Answer 3

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).
Editar: Cela ne fonctionnera qu'avec les navigateurs basés sur webkit et blink (Chrome(ium), Safari, Opera....) et donc la plupart des navigateurs mobiles. Non Firefox ou le support IE ici.
Cela peut être utile uniquement lorsque vous intégrez webkit/blink dans vos applications.

Toutes les étiquettes des pseudo-éléments seront cliquables.

[type=checkbox]:after {
  content: attr(value);
  margin: -3px 15px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
}

<input type="checkbox" value="My checkbox label value" />

Démonstration : http://codepen.io/mrmoje/pen/oteLl , + L'essentiel

Answer 4

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

Answer 5

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