jQuery selector สำหรับเลเบลของกล่องกาเครื่องหมาย

239

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

หากฉันมีช่องทำเครื่องหมายที่มีป้ายกำกับอธิบายอยู่ฉันจะเลือกป้ายกำกับด้วย jQuery ได้อย่างไร มันจะง่ายกว่าไหมถ้าจะให้รหัสป้ายกำกับแท็กและเลือกใช้$(#labelId)?

jquery checkbox jquery-selectors

— Darwyn
แหล่งที่มา

442

สิ่งนี้น่าจะใช้ได้:

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

ดูเพิ่มเติมที่: Selectors / attributeEquals - jQuery JavaScript Library

— หนังลูกวัว
แหล่งที่มา

3

สำหรับเบราว์เซอร์ Webkit (Safari / Chrome) ที่คุณสามารถทำได้ในการเข้าถึงป้ายกำกับทั้งหมดที่ได้รับมอบหมาย$('#comedyclubs')[0].labels #comedyclubs

— แมตต์

1

ใช้. text () เพื่อแปลงวัตถุเป็น string: alert ($ ("label [สำหรับ = 'comedyclubs']"). text ());

— Loren

เพียงแค่ใช้ $ ("label [สำหรับ = 'comedyclubs']") คุณจะได้รับค่า แต่จะทำให้ป้ายว่างเปล่า ดังนั้นใช้ $ ("label [สำหรับ = 'comedyclubs']"). text ()

— shahil

69

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

สิ่งนี้จะช่วยให้คุณสามารถเลือกป้ายกำกับสำหรับฟิลด์ทั้งหมดในลูปได้เช่นกัน สิ่งที่คุณต้องมั่นใจคือป้ายกำกับของคุณควรจะบอกว่าfor='FIELD'ที่ใดFIELDคือรหัสของฟิลด์ที่มีการกำหนดป้ายกำกับนี้

— Hanky Panky
แหล่งที่มา

5

นี่คือคำตอบที่ดีสำหรับทุกคนที่มีมากกว่าหนึ่งช่อง คำตอบนี้ควรเป็น # 1

46

สิ่งนี้ควรทำ:

$("label[for=comedyclubs]")

หากคุณมีอักขระที่ไม่ใช่ตัวอักษรและตัวเลขใน id ของคุณคุณจะต้องล้อมรอบค่า attr ด้วยเครื่องหมายคำพูด:

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

— Darko Z
แหล่งที่มา

2

แปลกที่ชื่อเสียง SO จะดำเนินไปอย่างไรเมื่อคำตอบนี้ถูกส่งในนาทีเดียวกับคำนำหน้า :)

— sscirrus

โหวตขึ้นสำหรับคำแนะนำในการล้อมรอบค่า attr ด้วยเครื่องหมายคำพูด :)

— 38419

5

ทางออกอื่นอาจเป็น:

$("#comedyclubs").next()

— Briganti
แหล่งที่มา

12

นี่อาจไม่ใช่โซลูชันที่เสถียรที่สุดเนื่องจากต้องการให้ป้ายกำกับเป็นรายการถัดไปหลังช่องทำเครื่องหมาย การออกแบบกราฟิกอาจทำลายตรรกะนี้

— กีบ

3

ขวา! แต่ในกรณีนี้ใช้งานได้ดี: D และสำหรับรุ่นที่ปลอดภัยมากขึ้น litle เราสามารถกำหนด. next ('label') หรือ. prev ('label')

— Briganti

การปรับปรุงเสถียรภาพเล็กน้อยจะเป็น:$("#comedyclubs").nextAll().first()

— sscirrus

ชอบแนวทางของคุณ $ (). ถัดไป (). ข้อความ ()

— Rm558

0

ขอบคุณ Kip สำหรับผู้ที่อาจจะประสบความสำเร็จเหมือนกันโดยใช้ $ (นี่) ในขณะที่วนซ้ำหรือเชื่อมโยงภายในฟังก์ชัน:

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

ฉันมองไปครู่หนึ่งขณะทำงานโครงการนี้ แต่ไม่พบตัวอย่างที่ดีดังนั้นฉันหวังว่านี่จะช่วยคนอื่น ๆ ที่อาจต้องการแก้ไขปัญหาเดียวกัน

ในตัวอย่างข้างต้นวัตถุประสงค์ของฉันคือการซ่อนสัญญาณวิทยุและจัดรูปแบบฉลากเพื่อมอบประสบการณ์ผู้ใช้ที่ไม่มั่นคง (เปลี่ยนทิศทางของแผนผังลำดับงาน)

คุณสามารถดูตัวอย่างได้ที่นี่

ถ้าคุณชอบตัวอย่างนี่คือ 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;}

และส่วนที่เกี่ยวข้องของ JavaScript:

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

รูตสำรองไปยังคำถามเดิมเนื่องจากเลเบลตามหลังอินพุตคุณสามารถใช้โซลูชัน css ที่แท้จริงและหลีกเลี่ยงการใช้ JavaScript ทั้งหมด ... :

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

— Pete - iCalculator
แหล่งที่มา