Suchen Sie die HTML-Bezeichnung, die einer bestimmten Eingabe zugeordnet ist

Angenommen, ich habe ein HTML-Formular. Jeder Eingang / select / Textfeld wird ein entsprechendes haben <label>mit dem forAttribut auf die ID des Begleiters es. In diesem Fall weiß ich, dass jeder Eingang nur eine einzige Bezeichnung hat.

Was ist bei einem Eingabeelement in Javascript - beispielsweise über ein Onkeyup-Ereignis - der beste Weg, um das zugehörige Label zu finden?

Scannen Sie zunächst die Seite nach Beschriftungen und weisen Sie der Beschriftung aus dem eigentlichen Formularelement einen Verweis zu:

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 ein Lookup-Array :)

Wenn Sie jQuery verwenden, können Sie so etwas tun

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

Wenn Sie jQuery nicht verwenden, müssen Sie nach dem Label suchen. Hier ist eine Funktion, die das Element als Argument verwendet und die zugehörige Bezeichnung zurückgibt

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

labelsDer HTML5-Standard enthält eine Eigenschaft, die auf Beschriftungen verweist, die einem Eingabeelement zugeordnet sind.

Sie könnten also so etwas verwenden (Unterstützung für native labelsEigenschaften, aber mit einem Fallback zum Abrufen von Etiketten, falls der Browser dies nicht unterstützt) ...

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

Noch einfacher, wenn Sie jQuery verwenden ...

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

Ich bin ein bisschen überrascht, dass niemand zu wissen scheint, dass Sie das perfekt dürfen :

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

Welche bekommen wird nicht durch eine der vorgeschlagenen Antworten aufhob, sondern wird die Eingabe korrekt beschriftet.

Hier ist ein Code, der diesen Fall berücksichtigt:

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

Verwendung:

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

Einige Notizen:

• Der Code wurde aus Gründen der Klarheit geschrieben, nicht aus Gründen der Leistung. Möglicherweise sind leistungsfähigere Alternativen verfügbar.
• Dieser Code unterstützt das gleichzeitige Abrufen der Beschriftungen mehrerer Elemente. Wenn Sie dies nicht möchten, passen Sie es nach Bedarf an.
• Dies kümmert sich immer noch nicht um Dinge wie, aria-labelledbywenn Sie das verwenden würden (als Übung dem Leser überlassen).
• Die Verwendung mehrerer Etiketten ist eine schwierige Angelegenheit, wenn es um die Unterstützung verschiedener Benutzeragenten und unterstützender Technologien geht. Testen Sie sie daher gut und verwenden Sie sie auf eigenes Risiko usw. usw.
• Ja, Sie können dies auch ohne Verwendung von jQuery implementieren. :-)

Vorhin...

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, Sie können dies auch mit JQuery tun. :-)

document.querySelector ("label [for =" + vHtmlInputElement.id + "]");

Dies beantwortet die Frage auf einfachste und schlankste Weise. Dies verwendet Vanille-Javascript und funktioniert auf allen richtigen Browsern des Mainstreams.

mit jquery könnte man so etwas machen

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

Wenn Sie bereit sind, querySelector zu verwenden (und dies sogar bis zu IE9 und manchmal bis zu IE8!), Ist eine andere Methode möglich.

Wenn Ihr Formularfeld eine ID hat und Sie das forAttribut der Bezeichnung verwenden , wird dies in modernem JavaScript ziemlich einfach:

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 über mehrere Etiketten bemerkt; Wenn alle den gleichen Wert für das forAttribut verwenden, verwenden Sie einfach querySelectorAllanstelle von querySelectorund durchlaufen Sie, um alles zu erhalten, was Sie benötigen.

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

Dies hat mir geholfen, die Bezeichnung eines Eingabeelements anhand seiner ID zu ermitteln.

Die Antwort von Gijs war für mich am wertvollsten, aber leider funktioniert die Erweiterung nicht.

Hier ist eine umgeschriebene Erweiterung, die funktioniert. Sie kann jemandem helfen:

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

Alle anderen Antworten sind extrem veraltet !!

Alles was du tun musst, ist:

input.labels

HTML5 wird bereits seit vielen Jahren von allen gängigen Browsern unterstützt. Es gibt absolut keinen Grund, dass Sie dies selbst von Grund auf neu machen oder es polyfill machen müssen! Im wahrsten Sinne des Wortes nur verwenden input.labelsund es löst alle Ihre Probleme.

Eine wirklich prägnante Lösung, die ES6-Funktionen wie Destrukturierung und implizite Renditen verwendet, um daraus einen praktischen Einzeiler zu machen, wäre:

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

Oder um einfach ein Label zu erhalten, keine NodeList:

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

Es ist tatsächlich viel einfacher, dem Etikett im Formular selbst eine ID hinzuzufügen, 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 verwenden:

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

Das Javascript muss sich in einer Body-Onload-Funktion befinden, um funktionieren zu können.

Nur ein Gedanke, funktioniert wunderbar für mich.

Wie bereits erwähnt, berücksichtigt die (derzeit) am besten bewertete Antwort nicht die Möglichkeit, eine Eingabe in ein Etikett einzubetten.

Da niemand eine JQuery-freie Antwort gepostet hat, ist hier meine:

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

In diesem Beispiel wird die Nachschlagetabelle der Einfachheit halber direkt durch die eingegebenen HTML-Elemente indiziert. Dies ist kaum effizient und Sie können es anpassen, wie Sie möchten.

Sie können ein Formular als Basiselement oder das gesamte Dokument verwenden, wenn Sie Beschriftungen für mehrere Formulare gleichzeitig erhalten möchten.

Es werden keine Überprüfungen auf falsches HTML durchgeführt (mehrere oder fehlende Eingaben in Beschriftungen, fehlende Eingaben mit der entsprechenden HTMLFor-ID usw.), aber Sie können sie gerne hinzufügen.

Möglicherweise möchten Sie die Beschriftungstexte zuschneiden, da häufig nachgestellte Leerzeichen vorhanden sind, wenn die Eingabe in die Beschriftung eingebettet ist.

Die beste Antwort funktioniert einwandfrei, aber in den meisten Fällen ist es übertrieben und ineffizient, alle labelElemente zu durchlaufen .

Hier ist eine effiziente Funktion, um das zu erhalten label, was zum inputElement gehört:

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

Für mich war diese eine Codezeile ausreichend:

el = document.getElementById(id).previousElementSibling;

In den meisten Fällen befindet sich das labelsehr nahe oder neben dem Eingang, was bedeutet, dass die Schleife in der obigen Funktion nur sehr wenige Male iteriert werden muss.

Haben Sie versucht, document.getElementbyID ('id') zu verwenden, wobei id die ID des Etiketts ist oder die Situation ist, in der Sie nicht wissen, nach welcher Sie suchen

Verwenden Sie einen JQuery-Selektor:

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

Für zukünftige Suchende ... Das Folgende ist eine jQuery-ified-Version der von FlySwat akzeptierten Antwort:

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

Verwenden von:

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

Ich weiß, dass dies alt ist, aber ich hatte Probleme mit einigen Lösungen und setzte diese zusammen. Ich habe dies unter Windows (Chrome, Firefox und MSIE) und OS X (Chrome und Safari) getestet und glaube, dass dies die einfachste Lösung ist. Es funktioniert mit diesen drei Arten des Anbringens eines Etiketts.

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

Verwenden von jQuery:

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

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

Ich habe für meine eigenen Bedürfnisse gemacht, kann für jemanden nützlich sein: 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");
            }
        }
    }
});

Ich bin etwas überrascht, dass niemand vorschlägt, die CSS-Beziehungsmethode zu verwenden.

In einem Stylesheet können Sie über die Elementauswahl auf eine Beschriftung verweisen:

<style>

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

</style>

Wenn das Kontrollkästchen die ID 'XXX' hat, wird die Bezeichnung über jQuery gefunden von:

$('#XXX + label');

Sie können auch .find ('+ label') anwenden, um das Label von einem jQuery-Kontrollkästchen zurückzugeben, dh nützlich beim Schleifen:

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