Sélecteur jQuery pour le libellé d'une case à cocher

239

<input type="checkbox" name="filter" id="comedyclubs"/>
<label for="comedyclubs">Comedy Clubs</label>

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

jquery checkbox jquery-selectors

— Darwyn
source

442

Cela devrait fonctionner:

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

Voir aussi: Selectors / attributeEquals - jQuery JavaScript Library

— Kip
source

3

Pour les navigateurs Webkit (Safari / Chrome), vous pouvez faire $('#comedyclubs')[0].labelspour accéder à toutes les étiquettes attribuées #comedyclubs.

— Matt

1

Utilisez .text () pour convertir un objet en chaîne: alert ($ ("label [for = 'comedyclubs']"). Text ());

— Loren

en utilisant simplement $ ("label [for = 'comedyclubs']" "), vous obtiendrez la valeur mais cela rendra l'étiquette vierge. alors, utilisez $ ("label [for = 'comedyclubs']" "). text ()

— shahil

69

$("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, c'est que vos étiquettes doivent indiquer for='FIELD'où se FIELDtrouve l'ID du champ pour lequel cette étiquette est définie.

— Hanky Panky
source

5

C'est une excellente réponse pour quiconque possède plus d'un domaine. Cette réponse devrait être n ° 1.

46

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 de guillemets:

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

— Darko Z
source

2

Étrange comment va la réputation de SO lorsque cette réponse a été soumise la même minute que la première. :)

— sscirrus

Upvote pour les conseils pour entourer la valeur d'attr de guillemets :)

— gardarvalur

5

Une autre solution pourrait être:

$("#comedyclubs").next()

— Briganti
source

12

ce n'est peut-être pas la solution la plus stable, car elle nécessite que l'étiquette soit toujours le prochain élément après la case à cocher. une refonte graphique pourrait briser cette logique.

— Kip

3

droite! mais dans ce cas fonctionne très bien: D et pour une version plus sécurisée, nous pouvons définir .next ('label'), ou .prev ('label').

— Briganti

Une amélioration mineure de la stabilisation serait:$("#comedyclubs").nextAll().first()

— sscirrus

comme votre approche. $ (). next (). text ()

— Rm558

0

Merci Kip, pour ceux qui cherchent à obtenir le même résultat en utilisant $ (this) lors de l'itération ou de l'association au sein d'une fonction:

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

J'ai cherché pendant un certain temps en travaillant sur ce projet, mais je n'ai pas pu trouver un bon exemple, donc j'espère que cela aidera d'autres personnes qui cherchent peut-être à résoudre le même problème.

Dans l'exemple ci-dessus, mon objectif était de masquer les entrées radio et de styliser les étiquettes pour offrir une expérience utilisateur plus fluide (en changeant 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://www.ifreight.solutions/process.html/images/icons/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 opter pour une solution CSS pure et éviter d'utiliser JavaScript complètement ...:

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

— Pete - iCalculator
source