jQuery-selector für das label einer checkbox

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

Wenn ich eine check-box mit einem Etikett, das beschreibt, wie kann ich wählen Sie das label mithilfe von jQuery? Wäre es leichter, zu geben, das label-tag eine ID, und wählen Sie, dass die Verwendung $(#labelId) ?

InformationsquelleAutor Darwyn | 2009-07-27

419

Sollte dies funktionieren:
```
$("label[for='comedyclubs']")
```
Siehe auch: Selektoren/attributeEquals - jQuery JavaScript Library
- Für Webkit-Browser (Safari/Chrome), können Sie $('#comedyclubs')[0].labels Zugriff auf alle Etiketten zugeordnet #comedyclubs.
- Verwenden .text() zu konvertieren Objekt zu string: alert($("label[for='comedyclubs']").text());
- einfach mit $("label[for='comedyclubs']") erhalten Sie den Wert, aber es ist das label leer. so verwenden Sie $("label[for='comedyclubs']").text()
InformationsquelleAutor Kip
67
```
$("label[for='"+$(this).attr("id")+"']");
```
Dies sollte Ihnen ermöglichen, wählen Sie Beschriftungen für die Felder in einer Schleife sowie. Alles, was Sie brauchen, um sicherzustellen, dass Ihre Etiketten sagen sollte for='FIELD' wo FIELD ist die id des Feldes, für das dieses label definiert wird.
- Dies ist eine große Antwort für alle, die mehr als ein Feld. Diese Antwort sollte #1 sein.
InformationsquelleAutor Hanky Panky
43

Dies sollte es tun:
```
$("label[for=comedyclubs]")
```
Wenn Sie nicht-alphanumerische Zeichen in deine id, dann müssen Sie die surround-attr-Wert mit Anführungszeichen:
```
$("label[for='comedy-clubs']")
```
- Seltsam, wie SO Ruf geht, wenn die Antwort gesendet wurde, der gleichen minute, als der führende einer. 🙂
- seine einzige internet-Punkte 🙂
InformationsquelleAutor Darko Z
5

Andere Lösung könnte sein:
```
$("#comedyclubs").next()
```
- könnte dies nicht die stabilste Lösung, als es erfordert, dass das Etikett immer das nächste Element nach der checkbox. eine grafische Neugestaltung brechen könnte dieser Logik.
- richtig! aber in diesem Fall gut funktioniert 😀 und für die etwas sicherere Variante, die wir definieren können .weiter('label'), oder .prev('label').
- Eine geringfügige Stabilisierung Verbesserung wäre: $("#comedyclubs").nextAll().first()
- wie Ihr Ansatz. $().next().text()
InformationsquelleAutor Briganti

Dank Kip, für diejenigen, die suchen können, um das gleiche zu erreichen mit $(this) während der Iteration oder zuordnen, die in einer Funktion:

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

Suchte ich nach einer Weile, während Sie arbeiten mit diesem Projekt konnte Sie aber nicht finden, ein gutes Beispiel also, ich hoffe, dies hilft anderen Menschen, die suchen können, das gleiche Problem.

Im Beispiel oben, mein Ziel war zu verstecken die radio-Eingänge und-Stil des labels bieten eine moderne user experience (änderung der Ausrichtung des Flussdiagramms).

Können Sie ein Beispiel finden Sie hier

Wenn Sie, wie im Beispiel, hier ist der 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 den relevanten Teil des JavaScript:

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

Einem alternativen root auf die ursprüngliche Frage, da das label dem Eingang folgt, könnte man mit einer reinen css-Lösung und vermeiden Sie die Verwendung von JavaScript zusammen...:

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

InformationsquelleAutor Pete - iCalculator

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.