JQuery селектор для метки флажка

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']")

Смотрите также: Селекторы / 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

Upvote за совет окружить значение attr кавычками :)

— gardarvalur

5

Другое решение может быть:

$("#comedyclubs").next()

— Briganti
источник

12

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

— Кип

3

право! но в этом случае работает нормально: D и для более безопасной версии мы можем определить .next ('label') или .prev ('label').

— Briganti

Небольшое улучшение стабилизации будет:$("#comedyclubs").nextAll().first()

— sscirrus

нравится твой подход. $ (). next (). text ()

— 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
источник