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


Réponses:


1916

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>


14
J'adore, mais veuillez modifier à nouveau. Ce n'est bon que pour les cases à cocher. N'encourageons pas les gens à envelopper leurs autres entrées avec des étiquettes, car cela casse le système de grille et la réactivité mobile sera plus difficile à trouver
Max

1
Si quelqu'un peut expliquer le commentaire que @John a laissé, faites-le, car cela n'a aucun sens pour moi.
Wesley Murch du

16
@John qui est un guide de balisage spécifiquement pour le bootstrap. Si vous n'utilisez pas de framework, ou si vous en utilisez un autre, cela devrait être tout à fait correct. Merci pour la réponse.
Wesley Murch

3
@John. Sur la page que vous liez, exemples de bootstrap, toutes les cases à cocher avec étiquette, je ne vois aucun avertissement comme vous l'indiquez, peut-être que ce n'est plus pertinent pour le dernier bootstrap.
user2144406

2
Comme je l'ai appris aujourd'hui, ne mélangez pas la méthode 1 et la méthode 2. Si vous encapsulez la case à cocher dans une étiquette ET incluez le pour, cliquer sur l'étiquette ne déclenchera pas la case à cocher.
BBlake

50

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>

1
Je suis confus du fait que vous avez donné aux deux cases à cocher le même nom et des valeurs différentes. Est-ce exprès?
LarsH

2
@LarsH - Oui, c'est ainsi que vous créez des groupes de cases à cocher.
Quentin

Merci. Je regardais w3.org/wiki/HTML/Elements/input/checkbox et cela n'a pas été utile à cet égard.
LarsH

2
Avec PHP, cela ne fera-t-il pas que $ _POST ['foo'] aura toujours une des deux valeurs maximum à la fois? Même si les deux vérifiés. Qu'est-ce qu'un groupe de cases à cocher?
jeromej

2
@JeromeJ: Pour php gérer correctement, vous devez ajouter des crochets au nom, par exemple: <input type="checkbox" name="foo[]" value="bar" ...>. Cela vous donnera un tableau qui contient les valeurs de toutes les cases cochées (qui ont ce nom). Par exemple $_POST['foo'][0]pourrait être baret $_POST['foo'][1]pourrait être baz(si les deux sont cochés).
Lévite

11

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


Vrai. Gecko et Trident et gecko ne semblent pas aimer ça. Cela ne fonctionnera qu'avec Webkit et Blink. Je mettrai à jour la réponse
mrmoje

3
Voté. Bien que cela soit possible, c'est une mauvaise façon - ne fonctionne pas sur de nombreux navigateurs, pas bon pour l'accessibilité.
James Billingham

Mis à part les problèmes de compatibilité, cette solution n'est pas aussi sémantique que la première réponse car il n'y a pas d'association directe dans le balisage entre le <label> et le <input>
deadboy

Le "ça marche sur Webkit / Blink" sent comme un bogue en utilisant ( stackoverflow.com/questions/2587669/… ) donc il peut cesser de fonctionner à tout moment.
Xenos

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

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

1
Étant donné que cela peut être source de confusion pour certains lecteurs, vous devez modifier la namevaleur de l' attribut pour quelque chose de différent de la valeur présente dans les attributs foret id, car ces deux sont liés, alors que ce namen'est pas le cas (il est cependant obligatoire d'être inclus, je crois cependant) .
Dzhuneyt

3

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

Vous pouvez ignorer les attributs foret iddans votre exemple, car la labelbalise ne contient qu'un seul élément d'entrée.
Dzhuneyt

2

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>


0

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


0

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

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

-7

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

9
Il n'est pas nécessaire d'utiliser JavaScript pour ce faire. Il est intégré au HTML.
Lasse Bunk

4
@LasseBunk, si seulement c'était juste JavaScript, mais toute la bibliothèque jQuery est nécessaire pour que cela fonctionne. Voyons si quelqu'un peut trouver une solution Angular 2.
laurent
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.