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

Comment 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: étiquette d’étiquette d’emballage

Enveloppez la case à cocher dans une étiquette:

  

Méthode 2: utiliser l’atsortingbut for

Utilisez l’atsortingbut for (correspond à l’ id la case à cocher):

   

REMARQUE : L’ID doit être unique sur la page!

Explication

Comme les autres réponses ne le mentionnent pas, une étiquette peut inclure jusqu’à 1 entrée et omettre l’atsortingbut for , et on supposera que c’est pour son entrée.

Extrait de w3.org (avec mon accent):

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

Pour associer implicitement une étiquette à un autre contrôle, l’élément de contrôle doit se trouver dans le contenu de l’élément LABEL . Dans ce cas, le 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’atsortingbuer un id à chaque case à cocher (génial!).

  • Pas besoin d’utiliser l’atsortingbut supplémentaire dans .

  • La zone cliquable de l’entrée est également la zone cliquable de l’étiquette, il n’y a donc pas deux endroits distincts sur lesquels cliquer pour contrôler la case à cocher – une seule, peu importe la distance entre le et le texte de l’étiquette. de CSS que vous lui appliquez.

Démo avec des CSS:

 label { border:1px solid #ccc; padding:10px; margin:0 0 10px; display:block; } label:hover { background:#eee; cursor:pointer; } 
    

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

 
What metasyntactic variables do you like?

Vous pouvez également utiliser des pseudo-éléments CSS pour sélectionner et afficher vos étiquettes à partir de tous les atsortingbuts 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 ne peut être utile que lors de l’intégration de webkit / clignotement sur vos applications.

   

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

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

   
 
		      	

Cela fonctionne aussi:

 

Cela devrait vous aider: W3Schools – Labels

 

   

Utilisez l’élément label et l’atsortingbut for pour l’associer à la case à cocher:

Utilisez ceci

   $("#checkbox_lbl").click(function(){ if($("#checkbox_id").is(':checked')) $("#checkbox_id").removAttr('checked'); else $("#checkbox_id").attr('checked'); }); });