Javascript 查找与给定输入关联的html标签

假设我有一个html表单。每个输入/选择/文本区域将有一个相应的

，其中

for

属性设置为其同伴的id。在这种情况下，我知道每个输入只有一个标签

---

在javascript中给定一个输入元素（例如，通过onkeyup事件），找到它的关联标签的最佳方法是什么？

您是否尝试过使用document.getElementbyID（'id'），其中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;
    }
}

---

尖刻的评论：是的，您也可以使用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];
   }
}

函数findLableForControl（el）{
var idVal=el.id；
labels=document.getElementsByTagName（'label'）；
对于（变量i=0；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];         
    }
}

不需要查找数组：）

使用JQuery选择器：

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

<style>

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

</style>

---

对于未来的搜索者。。。以下是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]));   
        }
    }
}

---

这有助于我使用输入元素的ID获取输入元素的标签。

我有点惊讶，似乎没有人知道您要执行以下操作：

用法：

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

一些注意事项：

• 编写代码是为了清晰，而不是为了性能。可能会有更高性能的替代方案
• 此代码支持一次性获取多个项目的标签。如果这不是你想要的，根据需要调整
• 这仍然不能解决一些问题，比如你是否要使用它（留给读者作为练习）
• 在支持不同的用户代理和辅助技术时，使用多个标签是一件棘手的事情，所以请做好测试并使用，风险自负等等
• 是的，您也可以在不使用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);
    });
};

---

中有一个

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

---

实际上，在表单本身的标签中添加id要容易得多，例如：

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

javascript必须在body onload函数中才能工作

---

只是一个想法，对我来说效果很好。

正如前面提到的，（当前）最高评级的答案没有考虑在标签中嵌入输入的可能性

由于没有人发布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>

---

我的jsiddle:

我为自己的需要制作的，可以对某人有用：

如果您愿意使用（而且您可以，甚至可以使用IE9，有时甚至IE8！），那么另一种方法就变得可行了

如果您的表单字段有一个ID，并且您使用标签的

属性来表示
，那么在现代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);
});

一些人注意到多个标签；如果它们都对
for
属性使用相同的值，只需使用
querySelectorAll
而不是
querySelector
并循环获取所需的所有内容。
我有点惊讶，没有人建议使用CSS关系方法

在样式表中，可以从元素选择器中引用标签：

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

<style>

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

</style>

您还可以应用.find（“+label”）从jQuery复选框元素返回标签，即在循环时很有用：

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

document.querySelector（“标签[for=“+vHtmlInputElement.id+”]”）

这以最简单、最简洁的方式回答了这个问题。
这使用了普通javascript，适用于所有主流浏览器。
所有其他答案都非常过时

你所要做的就是：

input.labels

HTML5已经被所有主流浏览器支持很多年了。绝对没有理由，你应该从零开始自己制作或填充它！只需使用
input.labels
，它就能解决您的所有问题。
使用ES6功能（如解构和隐式返回）将其转换为方便的一行程序，一个真正简洁的解决方案是：

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

或者只需获得一个标签，而不是节点列表：

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

最好的答案效果很好，但在大多数情况下，循环使用所有
标签
元素是过火和低效的

下面是一个有效函数，用于获取
输入
元素附带的
标签
：

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;

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

<style>

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

</style>

$('#XXX + label');

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

input.labels

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

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

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;