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

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