pemilih jQuery untuk label kotak centang

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

Jika saya memiliki kotak centang dengan label yang menggambarkannya, bagaimana saya bisa memilih label menggunakan jQuery? Apakah akan lebih mudah untuk memberikan label tag ID dan memilih yang menggunakan $(#labelId)?

jquery checkbox jquery-selectors Darwyn
sumber

Jawaban:

442

Ini seharusnya bekerja:

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

Lihat juga: Selectors / attributeEquals - jQuery JavaScript Library

Tidur
sumber
3
Untuk browser Webkit (Safari / Chrome), Anda dapat melakukannya $('#comedyclubs')[0].labelsuntuk mengakses semua label yang ditetapkan #comedyclubs.
Matt
1
Gunakan .text () untuk mengonversi objek menjadi string: alert ($ ("label [for = 'comedyclubs']"). Text ());
Loren
cukup dengan menggunakan $ ("label [untuk = 'comedyclubs']") akan memberi Anda nilai tetapi itu akan membuat label kosong. jadi, gunakan $ ("label [for = 'comedyclubs']"). text ()
shahil
69 
$("label[for='"+$(this).attr("id")+"']");

Ini akan memungkinkan Anda untuk memilih label untuk semua bidang dalam satu lingkaran juga. Yang perlu Anda pastikan adalah label Anda harus mengatakan di for='FIELD'mana FIELDid bidang yang label ini didefinisikan.

Saputangan Saputangan
sumber
5
Ini adalah jawaban yang bagus untuk siapa saja yang memiliki lebih dari satu bidang. Jawaban ini harus menjadi # 1.
46

Ini harus dilakukan: 

$("label[for=comedyclubs]")

Jika Anda memiliki karakter non alfanumerik di id Anda, maka Anda harus mengelilingi nilai attr dengan tanda kutip:

$("label[for='comedy-clubs']")
Darko Z
sumber
2
Aneh bagaimana reputasi SO berjalan ketika jawaban ini diajukan pada menit yang sama dengan yang pertama. :)
sscirrus
Terpilih untuk saran seputar nilai attr dengan tanda kutip :)
gardarvalur
5

Solusi lain dapat:

$("#comedyclubs").next()
Briganti
sumber
12
ini mungkin bukan solusi yang paling stabil, karena ini membutuhkan label untuk selalu menjadi item berikutnya setelah kotak centang. desain ulang grafis mungkin mematahkan logika ini.
Kip
3
Baik! tetapi dalam kasus ini berfungsi dengan baik: D dan untuk versi yang lebih aman kita dapat mendefinisikan .next ('label'), atau .prev ('label').
Briganti
Peningkatan stabilisasi minor adalah:$("#comedyclubs").nextAll().first()
sscirrus
menyukai pendekatan Anda. $ (). next (). text ()
Rm558
0

Terima kasih Kip, bagi mereka yang mungkin mencari untuk mencapai hal yang sama menggunakan $ (ini) sambil beralih atau bergaul dalam suatu fungsi:

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

Saya mencari sementara waktu mengerjakan proyek ini tetapi tidak dapat menemukan contoh yang baik jadi saya harap ini membantu orang lain yang mungkin mencari untuk menyelesaikan masalah yang sama.

Dalam contoh di atas, tujuan saya adalah menyembunyikan input radio dan memberi style pada label untuk memberikan pengalaman pengguna yang lebih licin (mengubah orientasi diagram alur).

Anda dapat melihat contohnya di sini

Jika Anda suka contohnya, inilah 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;}

dan bagian yang relevan dari JavaScript:

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

Root alternatif untuk pertanyaan awal, mengingat label mengikuti input, Anda bisa menggunakan solusi css murni dan menghindari menggunakan JavaScript sama sekali ...:

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