Найти метку HTML, связанную с заданным вводом

пробовали ли вы использовать document.getElementbyID ('id'), где id - это идентификатор метки или ситуация, когда вы не знаете, какой из них вы ищете

Ранее...

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

Потом...

var myLabel = lookup[myInput.id];

Язвительный комментарий: Да, вы также можете сделать это с помощью JQuery. :-)

Если вы используете jQuery, вы можете сделать что-то вроде этого

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

Если вы не используете jQuery, вам придется искать метку. Вот функция, которая принимает элемент в качестве аргумента и возвращает связанную метку.

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

с jquery вы могли бы сделать что-то вроде

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

Сначала просканируйте страницу на предмет ярлыков и назначьте ссылку на ярлык из фактического элемента формы:

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

Затем вы можете просто перейти:

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

Нет необходимости в поисковом массиве :)

Используйте селектор JQuery:

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

Для будущих искателей ... Ниже приведена версия принятого ответа FlySwat на основе 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]));   
        }
    }
}

С использованием:

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

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

Это помогло мне получить метку элемента ввода по его идентификатору.

Я немного удивлен, что, кажется, никто не знает, что вы вполне разрешено должны делать:

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

Что не будет подхвачено ни одним из предложенных ответов, но воля правильно пометит ввод.

Вот код, который учитывает этот случай:

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

Использование:

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

Некоторые примечания:

• Код был написан для ясности, а не для повышения производительности. Могут быть доступны более производительные альтернативы.
• Этот код поддерживает получение меток нескольких элементов за один раз. Если это не то, что вы хотите, при необходимости адаптируйте.
• Это по-прежнему не заботится о таких вещах, как aria-labelledby, если бы вы использовали это (оставлено в качестве упражнения для читателя).
• Использование нескольких ярлыков - сложный бизнес, когда дело доходит до поддержки различных пользовательских агентов и вспомогательных технологий, поэтому хорошо тестируйте и используйте на свой страх и риск и т. д. И т. Д.
• Да, вы также можете реализовать это без использования jQuery. :-)

Ответ от Gijs был для меня самым ценным, но, к сожалению, расширение не работает.

Вот переписанное расширение, которое работает, может кому-то помочь:

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

В Стандарт HTML5 есть свойство labels, которое указывает на метки, связанные с элементом ввода.

Итак, вы можете использовать что-то вроде этого (поддержка собственного свойства labels, но с резервным вариантом для получения меток на случай, если браузер его не поддерживает) ...

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

Еще проще, если вы используете 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;
};

На самом деле гораздо проще добавить идентификатор к метке в самой форме, например:

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

Затем вы можете просто использовать что-то вроде этого:

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 должен быть включен в функцию загрузки тела.

Просто мысль, прекрасно работает для меня.

Как уже упоминалось, ответ (в настоящее время) с самым высоким рейтингом не учитывает возможность встроить ввод внутри метки.

Поскольку никто не опубликовал ответ без JQuery, вот мой:

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

В этом примере для простоты таблица поиска напрямую индексируется входными элементами HTML. Это вряд ли эффективно, и вы можете адаптировать его по своему усмотрению.

Вы можете использовать форму как базовый элемент или весь документ, если хотите получить метки сразу для нескольких форм.

Никаких проверок на неправильный HTML (множественные или отсутствующие входные данные внутри меток, отсутствующие входные данные с соответствующим htmlFor id и т. д.) Не производятся, но вы можете их добавить.

Возможно, вы захотите обрезать тексты меток, поскольку конечные пробелы часто присутствуют, когда ввод встроен в метку.

Я знаю, что это устарело, но у меня были проблемы с некоторыми решениями, и я собрал это по кусочкам. Я тестировал это в Windows (Chrome, Firefox и MSIE) и OS X (Chrome и Safari) и считаю, что это самое простое решение. Он работает с этими тремя стилями прикрепления этикеток.

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

Используя jQuery:

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

Мой JSFiddle: http://jsfiddle.net/pnosko/6PQCw/

Сделал для себя, может кому пригодится: JSFIDDLE

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

Если вы хотите использовать querySelector (а вы можете, даже до IE9, а иногда и до IE8!), Другой метод становится жизнеспособным.

Если у вашего поля формы есть идентификатор, и вы используете атрибут for метки, это становится довольно просто в современном 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.info(label.textContent);
});

Некоторые отметили несколько ярлыков; если все они используют одно и то же значение для атрибута for, просто используйте querySelectorAll вместо querySelector и выполните цикл, чтобы получить все, что вам нужно.

Я немного удивлен, что никто не предлагает использовать метод отношений CSS?

в таблице стилей вы можете ссылаться на метку из селектора элементов:

<style>

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

</style>

если у флажка есть идентификатор "XXX" тогда метка будет найдена через jQuery:

$('#XXX + label');

Вы также можете применить .find ('+ label'), чтобы вернуть метку из элемента флажка jQuery, т.е. полезно при цикле:

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

document.querySelector ("метка [для =" + vHtmlInputElement.id + "]");

Это дает самый простой и краткий ответ на вопрос. Это использует ванильный javascript и работает во всех основных браузерах.

Все остальные ответы очень сильно устарели !!

Все, что вам нужно сделать, это:

input.labels

HTML5 уже много лет поддерживается всеми основными браузерами. Нет абсолютно никаких причин, по которым вам придется делать это с нуля самостоятельно или заполнять его полифиллами! Буквально просто используйте input.labels, и он решит все ваши проблемы.

По-настоящему краткое решение, использующее такие функции ES6, как деструктуризация и неявный возврат, чтобы превратить его в удобный один лайнер, было бы:

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

Или просто получить одну метку, а не NodeList:

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

Лучший ответ работает отлично, но в большинстве случаев перебор всех элементов label является излишним и неэффективным.

Вот эффективная функция для получения label, которая идет с элементом input:

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

Для меня этой одной строчки кода было достаточно:

el = document.getElementById(id).previousElementSibling;

В большинстве случаев label будет очень близко или рядом со входом, что означает, что цикл в приведенной выше функции должен повторяться очень небольшое количество раз.