jQuery-Selektor für das Label einer Checkbox

212

Wenn ich ein Kontrollkästchen mit einer Beschriftung habe, wie kann ich die Bezeichnung mit jQuery auswählen? Wäre es einfacher, dem Etikett eine ID zu geben und diese mit $(#labelId) auszuwählen?jQuery-Selektor für das Label einer Checkbox

Quelle

2009-07-27 Darwyn

386

Dies sollte funktionieren:

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

Siehe auch: Selectors/attributeEquals - jQuery JavaScript Library

Quelle

2009-07-27 04:23:26 Kip

Für Webkit-Browser (Safari/Chrome) können Sie '$ (# # comedyclubs) [0] .labels' verwenden, um auf alle Labels zuzugreifen, die # # comedyclubs zugeordnet sind. – Matt

Verwenden Sie .text(), um ein Objekt in einen String zu konvertieren: alert ($ ("label [for = 'comedyclubs']"). Text()); – Loren

einfach mit $ ("label [for = 'comedyclubs']") erhalten Sie den Wert, aber es wird das Etikett leer. also, benutze $ ("label [für = 'comedyclubs']"). text() – shahil

Dies sollte es tun:

$("label[for=comedyclubs]")

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

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

Quelle

2009-07-27 04:23:51

Seltsam wie SO Reputation geht, wenn diese Antwort die gleiche Minute wie die führende eingereicht wurde. :) – sscirrus

@sscirrus seine einzigen Internet-Punkte :) –

Eine andere Lösung könnte sein:

$("#comedyclubs").next()

Quelle

2011-02-02 10:23:57 Briganti

+12

Dies ist möglicherweise nicht die stabilste Lösung, da es erfordert, dass das Etikett immer das nächste Element nach dem Kontrollkästchen sein. Ein grafisches Redesign könnte diese Logik durchbrechen. – Kip

richtig!aber in diesem Fall funktioniert gut: D und für kleinere sicherere Version können wir .next ('label') oder .prev ('label') definieren. – Briganti

Eine geringfügige Stabilisierungsverbesserung wäre: '$ (# # comedyclubs). NextAll(). First()' – sscirrus

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

Diese Sie Etiketten für alle Felder in einer Schleife als auch wählen lassen sollte. Alles, was Sie sicherstellen müssen, ist, dass Ihre Etiketten for='FIELD' lauten sollen, wobei FIELD die ID des Feldes ist, für das diese Bezeichnung definiert wird.

Quelle

2012-08-03 07:08:34

Dies ist eine großartige Antwort für jeden, der mehr als ein Feld hat. Diese Antwort sollte # 1 sein. –

Dank Kip, für diejenigen, die möglicherweise suchen die gleichen mit $ (this), während Iterieren oder Zuordnen innerhalb einer Funktion zu erreichen:

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

ich eine Zeit lang sah während dieses Projekt arbeiten, aber nicht konnte finde ein gutes Beispiel, 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 Beschriftungen so zu gestalten, dass die Benutzerfreundlichkeit verbessert wurde (die Ausrichtung des Flussdiagramms änderte sich).

Sie können see an example here

Wenn Sie das Beispiel möchten, hier ist die 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 zum Original Frage, wenn das Etikett folgt die Eingabe, könnten Sie mit einer reinen CSS-Lösung gehen und vermeiden Sie die Verwendung von JavaScript insgesamt ...:

Quelle

2017-03-05 09:50:24

jQuery-Selektor für das Label einer Checkbox

Antwort

Verwandte Themen