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

237

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

Nếu tôi có một 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? Sẽ dễ dàng hơn để cung cấp cho thẻ nhãn ID và chọn sử dụng $(#labelId)?

jquery checkbox jquery-selectors

— Darwyn
nguồn

440

Điều này sẽ làm việc:

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

Xem thêm: Bộ chọn / propertyEquals - Thư viện JavaScript của jQuery

— Kíp
nguồn

3

Đối với trình duyệt Webkit (Safari / Chrome), bạn có thể làm $('#comedyclubs')[0].labelsđể truy cập tất cả các nhãn được gán #comedyclubs.

— Matt

1

Sử dụng .text () để chuyển đổi đối tượng thành chuỗi: alert ($ ("nhãn [for = 'comedyclub']"). Text ());

— Loren

chỉ cần sử dụng $ ("nhãn [for = 'comedyclub']") sẽ giúp bạn nhận được giá trị nhưng nó sẽ làm cho nhãn trống. vì vậy, hãy sử dụng $ ("nhãn [for = 'comedyclub']"). text ()

— shahil

69

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

Điều này sẽ cho phép bạn chọn nhãn cho tất cả các trường trong một vòng lặp. Tất cả những gì bạn cần đảm bảo là nhãn của bạn sẽ cho biết for='FIELD'đâu FIELDlà id của trường mà nhãn này được xác định.

— Hanky Panky
nguồn

5

Đây là một câu trả lời tuyệt vời cho bất cứ ai có nhiều hơn một lĩnh vực. Câu trả lời này phải là # 1.

45

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

$("label[for=comedyclubs]")

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

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

— Darko Z
nguồn

2

Thật kỳ lạ khi danh tiếng của SO đi khi câu trả lời này được gửi cùng phút với câu trả lời hàng đầu. :)

— sscirrus

Upvote cho lời khuyên để bao quanh giá trị attr với dấu ngoặc kép :)

— gardenarvalur

5

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

$("#comedyclubs").next()

— Brig
nguồn

12

đây có thể không phải là giải pháp ổn định nhất, vì nó yêu cầu nhãn phải luôn là mục tiếp theo sau hộp kiểm. một thiết kế lại đồ họa có thể phá vỡ logic này.

— Kip

3

đúng! nhưng trong trường hợp này hoạt động tốt: D và đối với phiên bản an toàn hơn, chúng ta có thể định nghĩa .next ('nhãn') hoặc .prev ('nhãn').

— Briganti

Một cải thiện ổn định nhỏ sẽ là:$("#comedyclubs").nextAll().first()

— sscirrus

như cách tiếp cận của bạn. $ (). next (). text ()

— Rm558

0

Cảm ơn Kip, cho những người có thể đang tìm cách đạt được điều tương tự bằng cách sử dụng $ (cái này) trong khi lặp hoặc liên kết trong một hàm:

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

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

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

Bạn có thể xem một ví dụ ở đây

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 có 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 thay thế cho câu hỏi ban đầu, được gắn nhãn theo đầu vào, bạn có thể đi với một giải pháp css thuần túy và tránh sử dụng JavaScript hoàn toàn ...:

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

— Pete - iCalculator
nguồn