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

голоса
214
<input type=checkbox name=filter id=comedyclubs/>
<label for=comedyclubs>Comedy Clubs</label>

Если у меня есть флажок с этикеткой , описывающей его как я могу выбрать метку с помощью JQuery? Было бы проще , чтобы дать маркирующие идентификатор и выберите , что использование $(#labelId)?

Задан 27/07/2009 в 05:21
источник пользователем
На других языках...                            


5 ответов

голоса
390

Это должно работать:

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

Смотрите также: Искатели / attributeEquals - Jquery JavaScript библиотеки

Ответил 27/07/2009 в 05:23
источник пользователем

голоса
41

Это следует сделать это:

$("label[for=comedyclubs]")

Если у вас есть не алфавитно-цифровых символов в идентификаторе, то вы должны окружить значение атр в кавычки:

$("label[for='comedy-clubs']")
Ответил 27/07/2009 в 05:23
источник пользователем

голоса
5

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

$("#comedyclubs").next()
Ответил 02/02/2011 в 11:23
источник пользователем

голоса
63
$("label[for='"+$(this).attr("id")+"']");

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

Ответил 03/08/2012 в 08:08
источник пользователем

голоса
0

Благодаря Кипы, для тех, кто может быть ищут для достижения того же с помощью $ (это) в то время как итерация или ассоциирования в функции:

$("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 {}
Ответил 05/03/2017 в 09:50
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more