Селектор jQuery для мітки прапорця

239

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

Якщо у мене є прапорець з міткою, що описує його, як я можу вибрати мітку за допомогою jQuery? Чи було б простіше вказати ідентифікатор тегу мітки та вибрати його за допомогою $(#labelId)?

jquery checkbox jquery-selectors

— Дарвін
джерело

442

Це має працювати:

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

Дивіться також: Selectors / attributeEquals - jQuery JavaScript Library

— Кіп
джерело

3

Для веб-переглядачів Webkit (Safari / Chrome) ви можете зробити $('#comedyclubs')[0].labelsдоступ до всіх призначених для них міток #comedyclubs.

— Метт

1

Використовуйте .text () для перетворення об’єкта в рядок: alert ($ ("label [for = 'comedyclubs']"). Text ());

— Лорен

просто використання $ ("label [for = 'comedyclubs']") отримає вам значення, але воно зробить мітку порожньою. тому використовуйте $ ("label [for = 'comedyclubs']"). text ()

— shahil

69

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

Це повинно дозволяти вам також вибирати мітки для всіх полів у циклі. Все, що вам потрібно, це ваші етикеткиfor='FIELD' де FIELDідентифікатор поля, для якого ця мітка визначена.

— Шахрайство
джерело

5

Це чудова відповідь для всіх, хто має більше одного поля. Ця відповідь повинна бути №1.

46

Це слід зробити:

$("label[for=comedyclubs]")

Якщо у вашому ідентифікаторі є не буквено-цифрові символи, то ви повинні оточити значення attr лапками:

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

— Darko Z
джерело

2

Дивно, як проходить репутація ТА, коли ця відповідь була подана в ту ж хвилину, що й ведуча. :)

— sscirrus

Оновлення поради щодо оточення значення attr лапками :)

— gardarvalur

5

Іншим рішенням може бути:

$("#comedyclubs").next()

— Бріганті
джерело

12

це може бути не найбільш стабільним рішенням, оскільки вимагає, щоб ярлик завжди був наступним пунктом після прапорця. графічний перегляд може порушити цю логіку.

— Кіп

3

правильно! але в цьому випадку добре працює: D і для більш безпечної версії ми можемо визначити .next ('label') або .prev ('label').

— Бріганті

Невеликим покращенням стабілізації було б:$("#comedyclubs").nextAll().first()

— sscirrus

подобається ваш підхід. $ (). наступний (). текст ()

— Rm558

0

Дякую, Кіп, тим, хто, можливо, прагне досягти того, використовуючи $ (this) під час ітерації або асоціації у межах функції:

$("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 {}

— Піт - iCalculator
джерело