Bir onay kutusunun etiketi için jQuery seçici

239

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

Etiketi açıklayan bir onay kutum varsa, jQuery kullanarak etiketi nasıl seçebilirim? Etiket etiketine bir kimlik vermek ve bunu kullanarak seçmek daha kolay olur $(#labelId)mu?

jquery checkbox jquery-selectors

— Darwyn
kaynak

442

Bu çalışmalı:

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

Ayrıca bkz: Seçiciler / attributeEquals - jQuery JavaScript Kütüphanesi

— uyuklama
kaynak

3

Webkit tarayıcıları (Safari / Chrome) için, $('#comedyclubs')[0].labelsatanan tüm etiketlere erişmek için yapabilirsiniz #comedyclubs.

— Matt

1

Nesneyi dizeye dönüştürmek için .text () kullanın: alert ($ ("label [for = 'comedyclubs']"). Text ());

— Loren

sadece $ ("label [for = 'comedyclubs']") kullanmanız size değer kazandıracak, ancak etiketi boş bırakacaktır. bu nedenle, $ ("label [for = 'comedyclubs']") kullanın. text ()

— shahil

69

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

Bu, bir döngüdeki tüm alanlar için de etiket seçmenize izin vermelidir. Tek yapmanız gereken, etiketlerinizin, bu etiketin tanımlandığı alanın kimliğinin for='FIELD'nerede FIELDolduğunu söylemesidir .

— Hanky Panky
kaynak

5

Bu, birden fazla alanı olan herkes için harika bir cevaptır. Bu cevap # 1 olmalıdır.

46

Bunu yapmalı:

$("label[for=comedyclubs]")

Kimliğinizde alfasayısal olmayan karakterler varsa, attr değerini tırnak işaretleri içine almalısınız:

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

— Darko Z
kaynak

2

Bu cevap, öncekiyle aynı dakika içinde gönderildiğinde, SO itibarının nasıl gittiğini garip. :)

— sscirrus

Attr değerini tırnak işaretleri ile çevreleyen tavsiye için

— oy verin

5

Başka bir çözüm şunlar olabilir:

$("#comedyclubs").next()

— Briganti
kaynak

12

etiketin onay kutusundan sonraki her zaman bir sonraki öğe olmasını gerektirdiğinden, bu en kararlı çözüm olmayabilir. grafik bir yeniden tasarım bu mantığı kırabilir.

— Kip

3

sağ! ancak bu durumda iyi çalışır: D ve litle daha güvenli sürüm için .next ('label') veya .prev ('label') tanımlayabiliriz.

— Briganti

Küçük bir istikrar iyileştirmesi şöyle olur:$("#comedyclubs").nextAll().first()

— sscirrus

yaklaşımınız gibi. $ (). next (). text ()

— 15:15

0

Bir işlevi içinde yineleme veya ilişkilendirme yaparken $ (this) kullanarak aynı şeyi başarmak isteyenler için teşekkürler Kip:

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

Bu projeyi çalışırken bir süre aradım ama iyi bir örnek bulamadım, umarım bu aynı sorunu çözmek isteyen başkalarına yardımcı olur.

Yukarıdaki örnekte amacım, radyo girişlerini gizlemek ve daha ince bir kullanıcı deneyimi sağlamak için etiketleri biçimlendirmekti (akış şemasının yönünü değiştirerek).

Sen olabilir burada bir örnek görmek

Örneği beğendiyseniz, işte 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;}

ve JavaScript'in ilgili kısmı:

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

Orijinal soruya alternatif bir kök, etiket girdiyi takip ettiğinde, saf bir css çözümü ile gidebilir ve JavaScript'i tamamen kullanmaktan kaçınabilirsiniz ...:

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

— Pete - iCalculator
kaynak