web-dev-qa-db-fra.com

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

<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 à l’étiquette et de le sélectionner avec $(#labelId)?

jquerycheckboxjquery-selectors
222
Darwyn

Cela devrait fonctionner:

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

Voir aussi: Selectors/attributeEquals - Bibliothèque JavaScript jQuery

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

Cela devrait vous permettre de sélectionner des étiquettes pour tous les champs d'une boucle. Tout ce que vous avez à faire, c’est que vos étiquettes doivent dire for='FIELD' où FIELD est l’id du champ pour lequel cette étiquette est définie.

65
Hanky Panky

Cela devrait le faire: 

$("label[for=comedyclubs]")

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

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

Une autre solution pourrait être:

$("#comedyclubs").next()
5
Briganti

Merci Kip, pour ceux qui cherchent peut-être à atteindre le même objectif en utilisant $ (this) tout en itérant ou en s’associant à une fonction:

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

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

Dans l'exemple ci-dessus, mon objectif était de masquer les entrées radio et de styler les étiquettes pour offrir une expérience utilisateur plus fluide (modification de l'orientation de l'organigramme).

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 initiale, étant donné que l'étiquette suit l'entrée, vous pouvez utiliser une solution de css pure et éviter d'utiliser JavaScript entièrement ...:

input[type=checkbox]:checked+label {}
0
Pete - iCalculator