Powiedzmy, że mam formularz HTML. Każde wejście / select / textarea będzie miało odpowiednik <label>
z for
atrybutem ustawionym na id jego towarzysza. W tym przypadku wiem, że każde wejście będzie miało tylko jedną etykietę.
Biorąc pod uwagę element wejściowy w javascript - na przykład poprzez zdarzenie onkeyup - jaki jest najlepszy sposób na znalezienie powiązanej etykiety?
javascript
html
label
Joel Coehoorn
źródło
źródło
function getInputLabel(thisElement) { var theAssociatedLabel,elementID; elementID = thisElement.id; theAssociatedLabel = thisElement.parentNode.querySelector("label[for='" + elementID + "']"); console.log('theAssociatedLabel.htmlFor: ' + theAssociatedLabel.htmlFor); theAssociatedLabel.style.backgroundColor = "green";//Set the label background color to green };
Odpowiedzi:
Najpierw zeskanuj stronę w poszukiwaniu etykiet i przypisz odwołanie do etykiety z rzeczywistego elementu formularza:
Następnie możesz po prostu przejść:
Nie ma potrzeby wyszukiwania tablicy :)
źródło
Jeśli używasz jQuery, możesz zrobić coś takiego
Jeśli nie używasz jQuery, będziesz musiał wyszukać etykietę. Oto funkcja, która przyjmuje element jako argument i zwraca skojarzoną etykietę
źródło
W standardzie HTML5 istnieje
labels
właściwość wskazująca na etykiety skojarzone z elementem wejściowym.Możesz więc użyć czegoś takiego (obsługa
labels
właściwości natywnej, ale z funkcją awaryjną do pobierania etykiet na wypadek, gdyby przeglądarka jej nie obsługiwała) ...Nawet łatwiej, jeśli używasz jQuery ...
źródło
Jestem trochę zaskoczony, że nikt nie wie, że wolno ci:
Które nie zostaną odebrane przez któregokolwiek z sugerowanych odpowiedzi, ale będzie poprawnie oznaczyć wejście.
Oto kod, który bierze pod uwagę ten przypadek:
Stosowanie:
Kilka uwag:
aria-labelledby
użycie tego (pozostawione jako ćwiczenie czytelnikowi).źródło
for
atrybutlabel
.Wcześniej...
Później...
Snarky komentarz: Tak, możesz to również zrobić za pomocą JQuery. :-)
źródło
document.querySelector ("label [for =" + vHtmlInputElement.id + "]");
To odpowiada na pytanie w najprostszy i najprostszy sposób. Wykorzystuje javascript typu vanilla i działa na wszystkich przeglądarkach głównego strumienia.
źródło
z jquery możesz zrobić coś takiego
źródło
Jeśli chcesz użyć querySelector (a możesz nawet do IE9, a czasem IE8!), Inna metoda staje się użyteczna.
Jeśli twoje pole formularza ma identyfikator i używasz
for
atrybutu etykiety , staje się to całkiem proste w nowoczesnym JavaScript:Niektórzy zauważyli o wielu etykietach; jeśli wszystkie używają tej samej wartości
for
atrybutu, po prostu użyjquerySelectorAll
zamiastquerySelector
i pętla, aby uzyskać wszystko, czego potrzebujesz.źródło
Wszystkie inne odpowiedzi są bardzo nieaktualne!
Wszystko co musisz zrobić to:
HTML5 jest obsługiwany przez wszystkie główne przeglądarki już od wielu lat. Nie ma absolutnie żadnego powodu, dla którego powinieneś zrobić to od podstaw samodzielnie lub wypełnić go w całości! Dosłownie po prostu użyj
input.labels
i rozwiązuje wszystkie twoje problemy.źródło
input.labels
nie jest obsługiwane przez IE lub Firefox Edge, i dopiero dodaje wsparcie.Pomogło mi to uzyskać etykietę elementu wejściowego za pomocą jego identyfikatora.
źródło
Odpowiedź od Gijsa była dla mnie najcenniejsza, ale niestety rozszerzenie nie działa.
Oto przepisane rozszerzenie, które działa, może komuś pomóc:
źródło
Naprawdę zwięzłym rozwiązaniem wykorzystującym funkcje ES6, takie jak destrukturyzacja i niejawne zwroty, w celu przekształcenia go w poręczny jeden liniowiec, byłoby:
Lub po prostu uzyskać jedną etykietę, a nie NodeList:
źródło
W rzeczywistości znacznie łatwiej jest dodać identyfikator do etykiety w samym formularzu, na przykład:
Następnie możesz po prostu użyć czegoś takiego:
Aby kod JavaScript działał, musi znajdować się w funkcji ładowania ciała.
Tylko myśl, działa na mnie pięknie.
źródło
Jak już wspomniano, (obecnie) najwyżej oceniana odpowiedź nie uwzględnia możliwości osadzenia wejścia wewnątrz etykiety.
Ponieważ nikt nie opublikował odpowiedzi wolnej od JQuery, oto moja:
W tym przykładzie, dla uproszczenia, tabela przeglądowa jest bezpośrednio indeksowana przez wejściowe elementy HTML. Jest to mało wydajne i możesz je dostosować w dowolny sposób.
Możesz użyć formularza jako elementu podstawowego lub całego dokumentu, jeśli chcesz uzyskać etykiety dla wielu formularzy jednocześnie.
Nie sprawdza się nieprawidłowego kodu HTML (wiele lub brak danych wejściowych w etykietach, brak danych wejściowych z odpowiednim identyfikatorem htmlFor itp.), Ale możesz je dodać.
Możesz chcieć przyciąć teksty etykiety, ponieważ końcowe spacje są często obecne, gdy dane wejściowe są osadzone w etykiecie.
źródło
Najlepsza odpowiedź działa doskonale, ale w większości przypadków pętla przez wszystkie
label
elementy jest przesadna i nieefektywna .Oto skuteczna funkcja, która pozwala uzyskać to,
label
co pasuje doinput
elementu:Dla mnie wystarczyła ta jedna linijka kodu:
W większości przypadków
label
będzie znajdować się bardzo blisko wejścia lub obok niego, co oznacza, że pętla w powyższej funkcji musi wykonać iterację bardzo małą liczbę razy.źródło
czy próbowałeś użyć document.getElementbyID ('id'), gdzie id jest identyfikatorem etykiety lub jest to sytuacja, w której nie wiesz, której szukasz
źródło
Użyj selektora JQuery:
źródło
Dla przyszłych poszukiwaczy ... Poniżej znajduje się wersja zaakceptowanej odpowiedzi FlySwat wykorzystująca jQuery:
Za pomocą:
źródło
for
pętla się skończyłaeach()
? DlaczegohtmlFor
zamiastattr("for")
?Wiem, że to jest stare, ale miałem problem z niektórymi rozwiązaniami i złożyłem to razem. Przetestowałem to na Windows (Chrome, Firefox i MSIE) i OS X (Chrome i Safari) i uważam, że jest to najprostsze rozwiązanie. Działa z tymi trzema stylami mocowania etykiety.
Korzystanie z jQuery:
Mój JSFiddle: http://jsfiddle.net/pnosko/6PQCw/
źródło
Zrobiłem na własne potrzeby, może być przydatny dla kogoś: JSFIDDLE
źródło
Jestem trochę zaskoczony, że nikt nie sugeruje użycia metody relacji CSS?
w arkuszu stylów możesz odwołać się do etykiety z selektora elementów:
jeśli pole wyboru ma identyfikator „XXX”, etykietę można znaleźć w jQuery przez:
Możesz również zastosować .find ('+ label'), aby zwrócić etykietę z elementu jQuery checkbox, np. Przydatne podczas zapętlania:
źródło