sélecteur jQuery pour l’étiquette d’une case à cocher

  

Si j’ai une case à cocher avec une étiquette le décrivant, comment puis-je sélectionner l’étiquette en utilisant jQuery? Serait-il plus facile de donner à l’étiquette une étiquette et de la sélectionner avec $(#labelId) ?

Cela devrait fonctionner:

 $("label[for='comedyclubs']") 

Voir aussi: Sélecteurs / atsortingbutsEquals – Bibliothèque JavaScript jQuery

 $("label[for='"+$(this).attr("id")+"']"); 

Cela devrait également vous permettre de sélectionner des étiquettes pour tous les champs d’une boucle. Tout ce dont vous avez besoin pour vous assurer que vos étiquettes devraient dire for='FIELD'FIELD est l’ID du champ pour lequel cette étiquette est définie.

Cela devrait le faire:

 $("label[for=comedyclubs]") 

Si vous avez des caractères non alphanumériques dans votre identifiant, vous devez entourer la valeur attr avec des guillemets:

 $("label[for='comedy-clubs']") 

Une autre solution pourrait être:

 $("#comedyclubs").next() 

Merci Kip, pour ceux qui cherchent peut-être à obtenir la même chose en utilisant $ (this) en itération ou en association dans une fonction:

 $("label[for="+$(this).attr("id")+"]").addClass( "orienSel" ); 

J’ai cherché pendant un certain temps pendant que je travaillais sur ce projet, mais je n’ai pas réussi à trouver un bon exemple, alors j’espère que cela aidera d’autres personnes qui cherchent à résoudre le même problème.

Dans l’exemple ci-dessus, mon objective était de masquer les entrées radio et de styliser les étiquettes pour fournir une expérience utilisateur plus fluide (modification de l’orientation du diagramme).

Vous pouvez voir un exemple ici

Si vous aimez l’exemple, voici le css:

 .orientation { position: absolute; top: -9999px; left: -9999px;} .orienlabel{background:#1a97d4 url('http://soffr.miximages.com/jquery/flowChart.png') no-repeat 2px 5px; background-size: 40px auto;color:#fff; width:50px;height:50px;display:inline-block; border-radius:50%;color:transparent;cursor:pointer;} .orR{ background-position: 9px -57px;} .orT{ background-position: 2px -120px;} .orB{ background-position: 6px -177px;} .orienSel {background-color:#323232;} 

et la partie pertinente du JavaScript:

 function changeHandler() { $(".orienSel").removeClass( "orienSel" ); if(this.checked) { $("label[for="+$(this).attr("id")+"]").addClass( "orienSel" ); } }; 

Une racine alternative à la question d’origine, étant donné que l’étiquette suit l’entrée, vous pouvez utiliser une solution css pure et éviter d’utiliser JavaScript tout à fait …:

 input[type=checkbox]:checked+label {}