Selettore jQuery per l'etichetta di una casella di controllo

239

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

Se ho una casella di controllo con un'etichetta che la descrive, come posso selezionare l'etichetta usando jQuery? Sarebbe più semplice assegnare un ID al tag etichetta e selezionarlo utilizzando $(#labelId)?

jquery checkbox jquery-selectors

— Darwyn
fonte

442

Questo dovrebbe funzionare:

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

Vedi anche: Selettori / attributoEquals - Libreria JavaScript jQuery

— Kip
fonte

3

Per i browser Webkit (Safari / Chrome), puoi fare $('#comedyclubs')[0].labelsper accedere a tutte le etichette assegnate #comedyclubs.

— Matt,

1

Usa .text () per convertire l'oggetto in stringa: alert ($ ("label [for = 'comedyclubs']"). Text ());

— Loren,

semplicemente usando $ ("label [for = 'comedyclubs']") otterrai il valore ma renderà vuota l'etichetta. quindi, usa $ ("label [for = 'comedyclubs']"). text ()

— shahil

69

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

Ciò dovrebbe consentire di selezionare anche le etichette per tutti i campi in un ciclo. Tutto quello che devi assicurarti è che le tue etichette dovrebbero dire for='FIELD'dove si FIELDtrova l'id del campo per il quale viene definita questa etichetta.

— Hanky Panky
fonte

5

Questa è un'ottima risposta per chiunque abbia più di un campo. Questa risposta dovrebbe essere # 1.

46

Questo dovrebbe farlo:

$("label[for=comedyclubs]")

Se hai caratteri non alfanumerici nel tuo ID, devi racchiudere il valore attr tra virgolette:

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

— Darko Z
fonte

2

Strano come va la reputazione SO quando questa risposta è stata inviata nello stesso minuto di quella principale. :)

— sscirrus,

Approfitta del consiglio di circondare il valore attr con le virgolette :)

— gardarvalur,

5

Un'altra soluzione potrebbe essere:

$("#comedyclubs").next()

— Briganti
fonte

12

questa potrebbe non essere la soluzione più stabile, poiché richiede che l'etichetta sia sempre l'elemento successivo dopo la casella di controllo. una riprogettazione grafica potrebbe rompere questa logica.

— Salta il

3

giusto! ma in questo caso funziona bene: D e per una versione più sicura possiamo definire .next ('etichetta') o .prev ('etichetta').

— Briganti,

Un lieve miglioramento della stabilizzazione sarebbe:$("#comedyclubs").nextAll().first()

— sscirrus,

come il tuo approccio. $ (). next (). text ()

— Rm558

0

Grazie Kip, per coloro che potrebbero voler ottenere lo stesso risultato usando $ (questo) mentre si itera o si associa all'interno di una funzione:

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

Ho cercato per un po 'di tempo mentre lavoravo a questo progetto, ma non sono riuscito a trovare un buon esempio, quindi spero che questo aiuti gli altri che potrebbero voler risolvere lo stesso problema.

Nell'esempio sopra, il mio obiettivo era nascondere gli ingressi radio e modellare le etichette per fornire un'esperienza utente più nitida (modificando l'orientamento del diagramma di flusso).

Puoi vedere un esempio qui

Se ti piace l'esempio, ecco il 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;}

e la parte rilevante di JavaScript:

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

Una radice alternativa alla domanda originale, dato che l'etichetta segue l'input, potresti scegliere una soluzione CSS pura ed evitare di usare JavaScript del tutto ...:

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

— Pete - iCalculator
fonte