jQuery-Selektor für die Bezeichnung eines Kontrollkästchens

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

Wie kann ich das Etikett mit jQuery auswählen, wenn ich ein Kontrollkästchen mit einer Beschriftung habe, die es beschreibt? Wäre es einfacher, dem Etikettenetikett eine ID zu geben und diese mit auszuwählen $(#labelId)?

jquery checkbox jquery-selectors Darwyn
quelle

Antworten:

439

Das sollte funktionieren:

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

Siehe auch: Selectors / attributeEquals - jQuery JavaScript Library

Pennen
quelle
3
Bei Webkit-Browsern (Safari / Chrome) können Sie $('#comedyclubs')[0].labelsauf alle zugewiesenen Labels zugreifen #comedyclubs.
Matt
1
Verwenden Sie .text (), um das Objekt in einen String zu konvertieren: alert ($ ("label [for = 'comicclubs']"). Text ());
Loren
Wenn Sie einfach $ ("label [for = 'Comedyclubs']") verwenden, erhalten Sie den Wert, aber das Label wird leer. Verwenden Sie also $ ("label [for = 'Comedyclubs']"). text ()
shahil
69 
$("label[for='"+$(this).attr("id")+"']");

Auf diese Weise können Sie auch Beschriftungen für alle Felder in einer Schleife auswählen. Sie müssen lediglich sicherstellen, dass in Ihren Beschriftungen angegeben ist, for='FIELD'wo FIELDsich die ID des Felds befindet, für das diese Beschriftung definiert wird.

Hanky ​​Panky
quelle
5
Dies ist eine großartige Antwort für alle, die mehr als ein Feld haben. Diese Antwort sollte # 1 sein.
45

Dies sollte es tun: 

$("label[for=comedyclubs]")

Wenn Ihre ID nicht alphanumerische Zeichen enthält, müssen Sie den attr-Wert in Anführungszeichen setzen:

$("label[for='comedy-clubs']")
Darko Z.
quelle
2
Seltsam, wie der SO-Ruf aussieht, als diese Antwort in derselben Minute wie die führende eingereicht wurde. :)
sscirrus
Upvote für den Rat, den attr-Wert mit Anführungszeichen zu umgeben :)
gardarvalur
5

Eine andere Lösung könnte sein:

$("#comedyclubs").next()
Briganti
quelle
12
Dies ist möglicherweise nicht die stabilste Lösung, da das Etikett immer das nächste Element nach dem Kontrollkästchen sein muss. Eine grafische Neugestaltung kann diese Logik brechen.
Kip
3
richtig! aber in diesem Fall funktioniert gut: D und für eine etwas sicherere Version können wir .next ('label') oder .prev ('label') definieren.
Briganti
Eine geringfügige Stabilisierungsverbesserung wäre:$("#comedyclubs").nextAll().first()
sscirrus
wie dein Ansatz. $ (). next (). text ()
Rm558
0

Vielen Dank an Kip für diejenigen, die möglicherweise versuchen, dasselbe mit $ (this) zu erreichen, während sie innerhalb einer Funktion iterieren oder assoziieren:

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

Ich habe während der Arbeit an diesem Projekt eine Weile gesucht, konnte aber kein gutes Beispiel finden. Ich hoffe, dies hilft anderen, die möglicherweise versuchen, das gleiche Problem zu lösen.

Im obigen Beispiel war es mein Ziel, die Funkeingänge auszublenden und die Beschriftungen so zu gestalten, dass eine benutzerfreundlichere Benutzererfahrung erzielt wird (Änderung der Ausrichtung des Flussdiagramms).

Hier sehen Sie ein Beispiel

Wenn Ihnen das Beispiel gefällt, finden Sie hier das 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;}

und der relevante Teil des JavaScript:

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

Eine alternative Wurzel zur ursprünglichen Frage, da die Bezeichnung der Eingabe folgt, können Sie eine reine CSS-Lösung verwenden und die Verwendung von JavaScript insgesamt vermeiden ...:

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