Frage jQuery-Selektor für die Beschriftung eines Kontrollkästchens


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

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


218
2017-07-27 04:21


Ursprung


Antworten:


Das sollte funktionieren:

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

Siehe auch: Selektoren / AttributEquals - jQuery JavaScript-Bibliothek


398
2017-07-27 04:23



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

Auf diese Weise können Sie auch Beschriftungen für alle Felder in einer Schleife auswählen. Alles, was Sie sicherstellen müssen, ist Ihre Etiketten sollten sagen for='FIELD' woher FIELD ist die ID des Feldes, für das dieses Label definiert wird.


63
2017-08-03 07:08



Dies sollte es tun:

$("label[for=comedyclubs]")

Wenn Sie in Ihrer ID nicht alphanumerische Zeichen haben, müssen Sie den attr-Wert mit Anführungszeichen umgeben:

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

41
2017-07-27 04:23



Eine andere Lösung könnte sein:

$("#comedyclubs").next()

5
2018-02-02 10:23



Danke Kip, für diejenigen, die vielleicht dasselbe mit $ (this) erreichen möchten, während sie innerhalb einer Funktion iterieren oder assoziieren:

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

Ich habe eine Weile nachgesehen, während ich an diesem Projekt gearbeitet habe, konnte aber kein gutes Beispiel finden, also hoffe ich, dass dies anderen hilft, die das gleiche Problem lösen möchten.

Im obigen Beispiel bestand mein Ziel darin, die Radioeingaben zu verbergen und die Labels so zu stylen, dass die Benutzerfreundlichkeit verbessert wird (Änderung der Ausrichtung des Ablaufdiagramms).

Sie können Siehe hier ein Beispiel

Wenn Sie das Beispiel mögen, hier ist 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 zu der ursprünglichen Frage, vorausgesetzt, dass die Bezeichnung der Eingabe folgt, können Sie mit einer reinen CSS-Lösung gehen und vermeiden, JavaScript insgesamt zu verwenden:

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

0
2018-03-05 09:50