Finde HTML-Label, das einer bestimmten Eingabe zugeordnet ist

Erste, Scannen Sie die Seite für Etiketten, und weisen Sie einen Verweis auf das Etikett von der tatsächlichen form element:

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];         
    }
}

Dann können Sie einfach gehen:

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

Keine Notwendigkeit für eine lookup-array 🙂

InformationsquelleAutor der Antwort FlySwat

Es ist ein labels Eigenschaft in der HTML5-standard die Punkte, um die Etiketten, die verbunden sind, um ein input-element.

Also könnten Sie so etwas wie dieses (Unterstützung für native labels Eigenschaft aber mit einem fallback für das abrufen von Etiketten im Fall, dass der browser nicht unterstützt wird)...

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;
};

Sogar einfacher, wenn Sie mit 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;
};

InformationsquelleAutor der Antwort alex

Früher...

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;
    }
}

Später...

var myLabel = lookup[myInput.id];

Snarky Kommentar: ja, kann man es auch mit JQuery. 🙂

InformationsquelleAutor der Antwort Tomalak

Wenn Sie bereit sind, zu verwenden querySelector (und Sie kann sogar bis auf IE9 und manchmal IE8!), eine andere Methode wird lebensfähig.

Wenn ein Formular-Feld hat eine ID, und verwenden Sie die Bezeichnung for Attribut, wird dies ziemlich einfach, in der modernen 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);
});

Einige haben angemerkt, über mehrere Etiketten; wenn Sie alle den gleichen Wert für die for - Attribut, verwenden Sie einfach querySelectorAll statt querySelector Schleife durch alles bekommen, was Sie brauchen.

InformationsquelleAutor der Antwort Brendan

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

Diese mir geholfen die Beschriftung eines input-element mittels seiner ID.

InformationsquelleAutor der Antwort haifacarina

Es ist eigentlich viel einfacher, um eine id, die Bezeichnung, die im Formular selbst, zum Beispiel:

<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
/>

Dann können Sie einfach so etwas wie dieses:

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";
}

Javascript funktioniert im body onload-Funktion zu arbeiten.

Nur ein Gedanke, funktioniert wunderbar für mich.

InformationsquelleAutor der Antwort Martie Henry

Alle anderen Antworten sind extrem veraltet!!

Alles, was Sie tun müssen, ist:

input.labels

HTML5 wird von allen großen Browsern schon seit vielen Jahren. Es gibt absolut keinen Grund, die Sie haben sollten, um diese von Grund auf Ihre eigenen oder polyfill! Buchstäblich nur verwenden input.labels und es löst alle Ihre Probleme.

InformationsquelleAutor der Antwort dj nag

Verwenden Sie einen JQuery-Selektor:

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

InformationsquelleAutor der Antwort Mike McKay

Ich weiß, das ist alt, aber ich hatte Probleme mit einigen Lösungen und setzte diese zusammen. Ich habe diese getestet unter Windows (Chrome, Firefox und MSIE) und OS X (Chrome und Safari) und glaube, das ist die einfachste Lösung. Es funktioniert mit diesen drei Stil der Anbringung einer Beschriftung.

<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>

Verwendung von jQuery:

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

Mein JSFiddle: http://jsfiddle.net/pnosko/6PQCw/

InformationsquelleAutor der Antwort Peter Nosko

Ich bin etwas überrascht, niemand ist darauf hindeutet, verwenden Sie die CSS-Beziehung-Methode?

in einem Stylesheet können Sie die Referenz ein label aus der element-Selektor:

<style>

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

</style>

wenn das Kontrollkästchen " hat die id 'XXX'
dann wird die Beschriftung durch die jQuery von:

$('#XXX + label');

Können Sie auch anwenden .find('+ label'), um das Etikett von einer jQuery-checkbox-element, dh nützlich, wenn man looping:

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

InformationsquelleAutor der Antwort Gordon Rouse

Ist die beste Antwort die funktioniert völlig in Ordnung, aber in den meisten Fällen, es ist übertrieben und ineffizient, um eine Schleife durch alle label Elemente.

Hier ist eine einwandfreie Funktion zu bekommen, die label das geht mit den input element:

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;
}

Mir, diese eine Zeile code war ausreichend:

el = document.getElementById(id).previousElementSibling;

In den meisten Fällen, die label wird sehr nah oder neben dem Eingang, was bedeutet, dass die Schleife in der oben genannten Funktion muss nur Durchlaufen eine sehr kleine Anzahl von Zeiten.

InformationsquelleAutor der Antwort Dan Bray