selektor jQuery dla etykiety pola wyboru

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

Jeśli mam pole wyboru z etykietą opisującą go, jak Mogę wybrać etykietę za pomocą jQuery? Czy łatwiej byłoby nadać tagowi etykiety ID i wybrać go za pomocą $(#labelId) ?

Author: informatik01, 2009-07-27

5 answers

To powinno zadziałać:

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

Zobacz także: selektory / attributeEquals-biblioteka JavaScript jquery

 405
Author: Kip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-27 04:23:26
$("label[for='"+$(this).attr("id")+"']");

Powinno to umożliwić zaznaczanie etykiet dla wszystkich pól w pętli. Musisz tylko upewnić się, że etykiety powinny zawierać for='FIELD', Gdzie FIELD jest identyfikatorem pola, dla którego ta etykieta jest definiowana.

 64
Author: Hanky Panky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-16 14:07:30

To powinno wystarczyć:

$("label[for=comedyclubs]")

Jeśli w id masz nie alfanumeryczne znaki, musisz otoczyć wartość attr cudzysłowami:

$("label[for='comedy-clubs']")
 42
Author: Darko Z,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-27 04:23:51

Innym rozwiązaniem może być:

$("#comedyclubs").next()
 5
Author: Briganti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-02 10:23:57

Thanks Kip, for those who may be looking to achieve the same using $(this) while iterating or asocjation within a function:

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

Szukałem przez chwilę podczas pracy nad tym projektem, ale nie mogłem znaleźć dobrego przykładu, więc mam nadzieję, że pomoże to innym, którzy mogą chcieć rozwiązać ten sam problem.

W powyższym przykładzie moim celem było ukrycie wejść radiowych i styl etykiet, aby zapewnić wygodniejsze wrażenia użytkownika (zmiana orientacji flowchart).

Możesz zobacz przykład tutaj

Jeśli podoba Ci się przykład, oto 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;}

I odpowiednia część JavaScript:

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

Alternatywny root do oryginalnego pytania, biorąc pod uwagę Etykietę podążającą za wejściem, możesz wybrać czyste rozwiązanie css i całkowicie uniknąć używania JavaScript...:

input[type=checkbox]:checked+label {}
 0
Author: Pete - iCalculator,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-05 09:50:24