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)
?
5 answers
To powinno zadziałać:
$("label[for='comedyclubs']")
Zobacz także: selektory / attributeEquals-biblioteka JavaScript jquery
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.
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']")
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()
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 {}
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