Finden html-Label mit einem bestimmten Eingang zugeordnet

Question

Lassen Sie uns sagen, dass ich ein HTML-Formular haben. Jeder Eingang / select / Textbereich eine entsprechende <label> mit dem for Attribute muß die ID-Set es ist Begleiter. In diesem Fall weiß ich, dass jeder Eingang nur ein einzelnes Etikett hat.

Da ein Eingabeelement in Javascript - über ein onkeyup Ereignis, zum Beispiel - was der beste Weg ist, um es zu finden ist verknüpftes Label

Answer 1

Zuerst scannen die Seite für Etiketten, und einen Verweis auf das Etikett von dem eigentlichen Formelement zuweisen:

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

Answer 2

Wenn Sie jQuery verwenden Sie so etwas wie dies tun können

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

Wenn Sie nicht jQuery verwenden Sie für das Label suchen. Hier ist eine Funktion, die das Element als Argument verwendet und das zugehörige Etikett

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

Answer 3

Es gibt eine labels Eigenschaft in der HTML5 Standard die auf Etiketten zeigt, die mit einem Eingangselement verbunden sind.

So können Sie so etwas wie diese (Unterstützung für native labels Eigenschaft aber mit einem Rückfall für die Beschaffung von Etikett, falls der Browser nicht unterstützt) verwenden könnten ...

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

Answer 4

Ich bin ein wenig überrascht, dass niemand scheint zu wissen, dass Sie perfekt erlaubt zu tun:

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

, die durch eine der vorgeschlagenen Antworten bekommen werden nicht aufgenommen, aber korrekt den Eingang markieren.

Hier ist ein Code, der diesen Fall nicht 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();
    });
};

Verbrauch:

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

Einige Hinweise:

• Der Code wurde aus Gründen der Klarheit geschrieben, nicht für die Leistung. Performante Alternativen zur Verfügung stehen.
• unterstützt Dieser Code die Etiketten mehrere Artikel auf einmal zu bekommen. Wenn das nicht das, was Sie wollen, anpassen, falls erforderlich.
• Das dauert noch nicht um Dinge wie aria-labelledby , wenn Sie, dass (links als Übung für den Leser) verwenden sind.
• mehrere Etiketten zu verwenden ist eine heikle Angelegenheit, wenn es in anderen Benutzeragenten und assistive Technologien zu unterstützen, kommt, so testen, gut und auf eigenes Risiko verwenden usw. usw.
• Ja, können Sie auch diese implementieren, ohne Verwendung von jQuery. : -)

Answer 5

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

Answer 6

mit jquery Sie so etwas wie

tun könnte

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

Answer 7

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

Das beantwortet die Frage, auf die einfachste und schlanksten Weise. Dies verwendet Vanille JavaScript und funktioniert auf alle Hauptstrom richtigen Browser.

Answer 8

Wenn Sie bereit sind, verwenden querySelector (und Sie können, sogar bis auf IE9 und manchmal IE8!), ein weiteres Verfahren wird durchführbar.

Wenn Ihr Formularfeld eine ID hat, und Sie den for Attribut des Labels, wird dies recht 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 über mehrere Etiketten festgestellt; wenn sie alle den gleichen Wert für das Attribut for verwenden, benutzen Sie einfach querySelectorAll statt querySelector und Schleife durch, um zu alles was Sie brauchen.

Answer 9

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

Das half mir das Etikett eines Eingabeelementes zu bekommen seine ID.

Answer 10

Antwort von Gijs war sehr wertvoll für mich, aber leider ist die Erweiterung funktioniert nicht.

Hier ist eine neu geschriebene Erweiterung, die funktioniert, kann es jemand 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);
    });
};

Answer 11

Es ist eigentlich viel einfacher, eine ID zu dem Etikett in der Form selbst 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 wie folgt 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 in einem Körper onload Funktion zu arbeiten.

Nur ein Gedanke, funktioniert wunderbar für mich.

Answer 12

Wie bereits erwähnt wurde, die (derzeit) top-rated Antwort nicht berücksichtigt in die Möglichkeit, einen Eingang in ein Etikett eingebettet werden.

Da niemand eine JQuery freie Antwort geschrieben hat, hier ist mein:

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 aus Gründen der Einfachheit wird die Nachschlagtabelle durch die Eingang HTML-Elemente direkt indexiert. Das ist wenig effizient und Sie können es anpassen, wie Sie wollen.

Sie können ein Formular als Basiselement verwendet werden, oder das gesamte Dokument, wenn Sie auf einmal Etiketten bekommen für mehrere Formulare wollen.

Es wurden keine Kontrollen für falsche HTML gemacht (Mehrfach- oder Eingänge innerhalb Etiketten fehlen, Eingang fehlt mit htmlFor id entspricht, etc), aber fühlen Sie sich frei, um sie hinzuzufügen.

Sie möchten die Etikettentexte trimmen, da Leerzeichen sind häufig vorhanden, wenn die Eingabe in das Etikett eingebettet ist.

Answer 13

Sie haben versucht document.getElementById mit ( ‚id‘) wobei id die ID des Etiketts ist oder die Situation, dass Sie nicht wissen, welche Sie suchen

Answer 14

Verwenden Sie einen JQuery-Selektor:

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

Answer 15

Für zukünftige Forscher ... Es folgt eine jQuery-ified Version von FlySwat des 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]));   
        }
    }
}

Mit:

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

Answer 16

Ich weiß, das ist alt, aber ich hatte Probleme mit einigen Lösungen und pieced diese zusammen. Ich habe dies auf Windows (Chrome, Firefox und MSIE) getestet und OS X (Chrome und Safari) und glauben, dass dies die einfachste Lösung ist. Es arbeitet mit diesen drei Stil der Anbringung eines Etiketts an.

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

Mit jQuery:

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

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

Answer 17

ich für meinen eigenen Bedarf vorgenommen haben, können 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");
            }
        }
    }
});

Answer 18

Ich bin überrascht Bit niemand was auf die CSS Beziehung Methode zu verwenden?

in einem Stylesheet Sie ein Label aus dem Elementselektoreinrichtung verweisen können:

<style>

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

</style>

Wenn Sie das Kontrollkästchen hat eine ID von ‚XXX‘ dann würde das Etikett durch jQuery gefunden wird durch:

$('#XXX + label');

Sie können auch .find ( '+ label') gelten das Etikett aus einem jQuery Checkbox Elemente zurückzukehren, also nützlich, wenn Looping:

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

Answer 19

Alle anderen Antworten sind extrem veraltet !!

Alles, was Sie tun müssen, ist:

input.labels

HTML5 wurde von allen großen Browsern bereits seit vielen Jahren unterstützt. Es gibt absolut keinen Grund, dass Sie diese auf Ihrem eigenen von Grund auf neu machen müssen sollte oder es POLYfill! Buchstäblich nur input.labels verwenden und es löst alle Probleme.

Answer 20

Die beste Antwort funktioniert perfekt in Ordnung, aber in den meisten Fällen ist es übertrieben und ineffizient Schleife durch alle label Elemente.

Hier ist eine efficent Funktion die label, die mit dem input Elemente geht zu bekommen:

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 ist dies eine Zeile Code war ausreichend:

el = document.getElementById(id).previousElementSibling;

In den meisten Fällen die label wird sehr nahe oder neben den Eingang, der die Schleife in der obigen Funktion bedeutet, braucht nur eine sehr geringe Anzahl von Malen zu wiederholen.

Answer 21

Eine wirklich prägnante Lösung ES6 mit Funktionen wie Destrukturierung und impliziten Renditen in ein handliches Einzeiler zu drehen wäre:

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

Oder einfach ein Etikett zu erhalten, nicht eine NodeList:

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