Znajdź etykietę html powiązaną z danym wejściem

Powiedzmy, że mam formularz HTML. Każde wejście / select / textarea będzie miało odpowiednik <label>z foratrybutem 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?

Najpierw zeskanuj stronę w poszukiwaniu etykiet i przypisz odwołanie do etykiety z rzeczywistego elementu formularza:

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

Następnie możesz po prostu przejść:

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

Nie ma potrzeby wyszukiwania tablicy :)

Jeśli używasz jQuery, możesz zrobić coś takiego

$('label[for="foo"]').hide ();

Jeśli nie używasz jQuery, będziesz musiał wyszukać etykietę. Oto funkcja, która przyjmuje element jako argument i zwraca skojarzoną etykietę

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}

W standardzie HTML5 istnieje labelswłaściwość wskazująca na etykiety skojarzone z elementem wejściowym.

Możesz więc użyć czegoś takiego (obsługa labelswłaściwości natywnej, ale z funkcją awaryjną do pobierania etykiet na wypadek, gdyby przeglądarka jej nie obsługiwała) ...

var getLabelsForInputElement = function(element) {
    var labels = [];
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && Array.prototype.push
        .apply(labels, document.querySelector("label[for='" + id + "']"));

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }  
    }

    return labels;
};

// ES6
var getLabelsForInputElement = (element) => {
    let labels;
    let id = element.id;

    if (element.labels) {
        return element.labels;
    }

    if (id) {
        labels = Array.from(document.querySelector(`label[for='${id}']`)));
    }

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.push(element);
        }  
    }

    return labels;
};

Nawet łatwiej, jeśli używasz jQuery ...

var getLabelsForInputElement = function(element) {
    var labels = $();
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && (labels = $("label[for='" + id  + "']")));

    labels = labels.add($(element).parents("label"));

    return labels;
};

Jestem trochę zaskoczony, że nikt nie wie, że wolno ci:

<label>Put your stuff here: <input value="Stuff"></label>

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:

$.fn.getLabels = function() {
    return this.map(function() {
        var labels = $(this).parents('label');
        if (this.id) {
            labels.add('label[for="' + this.id + '"]');
        }
        return labels.get();
    });
};

Stosowanie:

$('#myfancyinput').getLabels();

Kilka uwag:

• Kod został napisany dla przejrzystości, a nie wydajności. Mogą być dostępne bardziej wydajne alternatywy.
• Ten kod obsługuje pobieranie etykiet wielu elementów za jednym razem. Jeśli nie tego chcesz, dostosuj się w razie potrzeby.
• To nadal nie dotyczy rzeczy, takich jak aria-labelledbyużycie tego (pozostawione jako ćwiczenie czytelnikowi).
• Używanie wielu etykiet to trudna sprawa, jeśli chodzi o wsparcie w różnych programach użytkownika i technologiach pomocniczych, więc dobrze przetestuj i używaj na własne ryzyko itp.
• Tak, można to również zaimplementować bez użycia jQuery. :-)

Wcześniej...

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

Później...

var myLabel = lookup[myInput.id];

Snarky komentarz: Tak, możesz to również zrobić za pomocą JQuery. :-)

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.

z jquery możesz zrobić coś takiego

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");

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 foratrybutu etykiety , staje się to całkiem proste w nowoczesnym JavaScript:

var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');

[].forEach.call(formFields, function (formField) {
    var inputId = formField.id;
    var label = form.querySelector('label[for=' + inputId + ']');
    console.log(label.textContent);
});

Niektórzy zauważyli o wielu etykietach; jeśli wszystkie używają tej samej wartości foratrybutu, po prostu użyj querySelectorAllzamiast querySelectori pętla, aby uzyskać wszystko, czego potrzebujesz.

Wszystkie inne odpowiedzi są bardzo nieaktualne!

Wszystko co musisz zrobić to:

input.labels

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.labelsi rozwiązuje wszystkie twoje problemy.

$("label[for='inputId']").text()

Pomogło mi to uzyskać etykietę elementu wejściowego za pomocą jego identyfikatora.

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:

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};

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:

const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)

Lub po prostu uzyskać jedną etykietę, a nie NodeList:

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)

W rzeczywistości znacznie łatwiej jest dodać identyfikator do etykiety w samym formularzu, na przykład:

<label for="firstName" id="firstNameLabel">FirstName:</label>

<input type="text" id="firstName" name="firstName" class="input_Field" 
       pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
       title="Alphabetic, Space, Dash Only, 2-25 Characters Long" 
       autocomplete="on" required
/>

Następnie możesz po prostu użyć czegoś takiego:

if (myvariableforpagelang == 'es') {
   // set field label to spanish
   document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
   // set field tooltip (title to spanish
   document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}

Aby kod JavaScript działał, musi znajdować się w funkcji ładowania ciała.

Tylko myśl, działa na mnie pięknie.

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:

var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
    var label = labels[i];
    var input = label.htmlFor
              ? document.getElementById(label.htmlFor)
              : label.getElementsByTagName('input')[0];
    input_label[input.outerHTML] = 
        (label.innerText || label.textContent); // innerText for IE8-
}

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.

Najlepsza odpowiedź działa doskonale, ale w większości przypadków pętla przez wszystkie labelelementy jest przesadna i nieefektywna .

Oto skuteczna funkcja, która pozwala uzyskać to, labelco pasuje do inputelementu:

function getLabelForInput(id)
{
    var el = document.getElementById(id);
    if (!el)
        return null;
    var elPrev = el.previousElementSibling;
    var elNext = el.nextElementSibling;
    while (elPrev || elNext)
    {
        if (elPrev)
        {
            if (elPrev.htmlFor === id)
                return elPrev;
            elPrev = elPrev.previousElementSibling;
        }
        if (elNext)
        {
            if (elNext.htmlFor === id)
                return elNext;
            elNext = elNext.nextElementSibling;
        }
    }
    return null;
}

Dla mnie wystarczyła ta jedna linijka kodu:

el = document.getElementById(id).previousElementSibling;

W większości przypadków labelbę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.

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

Użyj selektora JQuery:

$("label[for="+inputElement.id+"]")

Dla przyszłych poszukiwaczy ... Poniżej znajduje się wersja zaakceptowanej odpowiedzi FlySwat wykorzystująca jQuery:

var labels = $("label");
for (var i = 0; i < labels.length; i++) {
    var fieldId = labels[i].htmlFor;
    if (fieldId != "") {
        var elem = $("#" + fieldId);
        if (elem.length != 0) {
            elem.data("label", $(labels[i]));   
        }
    }
}

Za pomocą:

$("#myFormElemId").data("label").css("border","3px solid red");

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.

<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>

<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>

<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>

Korzystanie z jQuery:

$(".c123").click(function() {
    $cb = $(this);
    $lb = $(this).parent();
    alert( $cb.attr('id') + ' = ' + $lb.text() );
});

Mój JSFiddle: http://jsfiddle.net/pnosko/6PQCw/

Zrobiłem na własne potrzeby, może być przydatny dla kogoś: JSFIDDLE

$("input").each(function () {
    if ($.trim($(this).prev('label').text()) != "") {
        console.log("\nprev>children:");
        console.log($.trim($(this).prev('label').text()));
    } else {
        if ($.trim($(this).parent('label').text()) != "") {
            console.log("\nparent>children:");
            console.log($.trim($(this).parent('label').text()));
        } else {
            if ($.trim($(this).parent().prev('label').text()) != "") {
                console.log("\nparent>prev>children:");
                console.log($.trim($(this).parent().prev('label').text()));
            } else {
                console.log("NOTFOUND! So set your own condition now");
            }
        }
    }
});

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:

<style>

//for input element with class 'YYY'
input.YYY + label {}

</style>

jeśli pole wyboru ma identyfikator „XXX”, etykietę można znaleźć w jQuery przez:

$('#XXX + label');

Możesz również zastosować .find ('+ label'), aby zwrócić etykietę z elementu jQuery checkbox, np. Przydatne podczas zapętlania:

$('input[type=checkbox]').each( function(){
   $(this).find('+ label');
});