Html étiquette associée à une entrée donnée

D'abord, parcourez la page des étiquettes, et d'attribuer une référence à l'étiquette de l'élément de formulaire:

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

Ensuite, vous pouvez simplement aller:

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

Pas nécessaire pour une recherche de tableau 🙂

Il y a un labels propriété dans le La norme HTML5 qui souligne les étiquettes qui sont associés à un élément de saisie.

Afin que vous pouvez utiliser quelque chose comme ceci (natif labels bien, mais avec un repli pour la récupération des étiquettes dans le cas où le navigateur ne le supporte pas)...

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

Encore plus facile si vous êtes en utilisant 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;
};

Plus tôt...

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

Plus tard...

var myLabel = lookup[myInput.id];

Sarcastique commentaire: Oui, vous pouvez aussi le faire avec JQuery. 🙂

avec jquery, vous pourriez faire quelque chose comme

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

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

Cela m'a aidé à obtenir le label d'un élément d'entrée à l'aide de son ID.

Toutes les autres réponses sont extrêmement périmé!!

Tout ce que vous avez à faire est de:

input.labels

HTML5 a été pris en charge par tous les navigateurs majeurs depuis de nombreuses années déjà. Il n'y a absolument aucune raison que vous devriez avoir à faire ce à partir de zéro sur votre propre ou polyfill il! Littéralement juste utiliser input.labels et il résout tous vos problèmes.

Comme il a déjà été mentionné, l' (actuellement) les mieux notés réponse ne tient pas compte de la possibilité d'incorporer une entrée à l'intérieur d'une étiquette.

Puisque personne n'a posté un JQuery-libre réponse, voici la mienne :

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

Dans cet exemple, par souci de simplicité, la table de recherche est directement indexée par l'apport d'éléments HTML. Ce n'est guère efficace et vous pouvez l'adapter comme vous le souhaitez.

Vous pouvez utiliser un formulaire comme élément de base, ou le document en entier si vous souhaitez obtenir des étiquettes pour plusieurs formes à la fois.

Aucune vérification n'est faite pour HTML incorrect (multiple ou manquant entrées à l'intérieur des étiquettes, manquant d'entrée correspondant htmlFor id, etc), mais n'hésitez pas à les ajouter.

Vous pourriez voulez couper l'étiquette textes, puisque les espaces sont souvent présents lorsque l'entrée est incorporé dans l'étiquette.

avez-vous essayé d'utiliser document.getElementbyID('id') où id est l'identifiant de l'étiquette ou de la situation est que vous ne savez pas qui vous êtes à la recherche pour

Pour les futurs chercheurs... ce qui suit est un jQuery-identifiés version de FlySwat est accepté réponse:

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

À l'aide de:

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

J'ai fait pour mon propre besoin, peut être utile pour quelqu'un: 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");
            }
        }
    }
});

La meilleure réponse qui fonctionne parfaitement bien, mais dans la plupart des cas, il est exagéré, et inefficace d'une boucle sur tous les label éléments.

Voici un efficace fonction pour obtenir les label qui va avec la input élément:

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

Pour moi, cette ligne de code a été suffisant:

el = document.getElementById(id).previousElementSibling;

Dans la plupart des cas, la label sera très proche ou à côté de l'entrée, ce qui signifie que la boucle dans la fonction ci-dessus ne doit effectuer une itération sur un très petit nombre de fois.