Bộ chọn jQuery cho nhãn của hộp kiểm

Question

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

Nếu tôi có hộp kiểm có nhãn mô tả nó, làm cách nào tôi có thể chọn nhãn bằng jQuery? Nó sẽ dễ dàng hơn để cung cấp cho thẻ nhãn một ID và chọn nó bằng cách sử dụng $(#labelId)?

Answer 1

này nên làm việc:

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

Xem thêm: Selectors/attributeEquals - jQuery JavaScript Library

Answer 2

này nên làm điều đó:

$("label[for=comedyclubs]") 

Nếu bạn có các ký tự không tự chữ và số trong id của bạn thì bạn phải bao quanh attr giá trị có dấu ngoặc kép:

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

.210

Answer 3

Một giải pháp khác có thể là:

$("#comedyclubs").next() 

Answer 4

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

này sẽ cho phép bạn chọn nhãn cho tất cả các lĩnh vực trong một vòng lặp là tốt. Tất cả những gì bạn cần đảm bảo là các nhãn của bạn nên nói là for='FIELD' trong đó FIELD là id của trường mà nhãn này đang được xác định.

Answer 5

Cảm ơn Kip, đối với những người có thể tìm kiếm để đạt được cùng sử dụng $ (this) trong khi lặp lại hoặc liên kết trong một hàm:

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

Tôi nhìn trong chốc lát khi làm việc dự án này nhưng không thể tìm một ví dụ tốt vì vậy tôi hy vọng điều này sẽ giúp những người khác có thể tìm cách giải quyết cùng một vấn đề.

Trong ví dụ trên, mục tiêu của tôi là ẩn đầu vào radio và tạo kiểu cho nhãn để cung cấp trải nghiệm người dùng slicker (thay đổi hướng của sơ đồ).

Bạn có thể see an example here

Nếu bạn thích ví dụ, đây là 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;} 

và phần liên quan của JavaScript:

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

Một gốc xen kẽ với bản gốc câu hỏi, với nhãn sau đầu vào, bạn có thể đi với một giải pháp css tinh khiết và tránh sử dụng JavaScript hoàn toàn ...:

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