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

Question

假设我有一个 html 表单。每个输入/选择/文本区域都会有一个对应的 <label> 与 for 属性设置为其同伴的 id。在这种情况下，我知道每个输入只有一个标签。

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

Answer 1

首先，扫描页面中的标签，并从实际表单元素中分配对标签的引用：

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!';

不需要查找数组：）

Answer 2

如果你正在使用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];
   }
}

Answer 3

labels属性“rel =”noreferrer“> HTML5标准，指向与输入元素关联的标签。

所以你可以使用这样的东西（支持原生的<=>属性，但是如果浏览器不支持它，可以使用后备来检索标签）...

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

Answer 4

我有点惊讶似乎没人知道你 完全允许 去做：

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

一些注意事项：

• 编写代码是为了清晰，而不是为了性能。可能会有更高性能的替代方案。
• 这段代码支持一次性获取多个item的标签。如果这不是您想要的，请根据需要进行调整。
• 这仍然没有解决类似的问题 aria-labelledby 如果您要使用它（留给读者作为练习）。
• 当涉及到支持不同的用户代理和辅助技术时，使用多个标签是一件棘手的事情，因此请做好测试并自行承担风险等。ETC。
• 是的，您也可以在不使用 jQuery 的情况下实现此目的。:-)

Answer 5

...早些时候

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

Snarky评论：是的，您也可以使用JQuery。 ： - ）

Answer 6

使用jquery你可以做类似

的事情

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

Answer 7

document.querySelector（<！> quot; label [for = <！> quot; + vHtmlInputElement.id + <！> quot;] <！> quot;）;

这以最简单和最简洁的方式回答了这个问题。 这使用vanilla javascript并适用于所有主流适当的浏览器。

Answer 8

如果您愿意使用 querySelector （您可以，甚至可以使用IE9 IE8！），另一种方法变得可行。

如果您的表单字段有ID，并且您使用标签的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.log(label.textContent);
});

有些人注意到多个标签;如果它们都为querySelectorAll属性使用相同的值，只需使用querySelector而不是<=>并循环以获得所需的一切。

Answer 9

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

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

Answer 10

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

Answer 11

在表单中添加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
/>

然后，你可以简单地使用这样的东西：

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必须在body onload函数中才能工作。

只是一个想法，对我来说很漂亮。

Answer 12

正如已经提到的那样，（目前）评价最高的答案没有考虑在标签内嵌入输入的可能性。

由于没有人发布过无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的输入等）进行检查，但可以随意添加它们。

您可能希望修剪标签文本，因为当输入嵌入标签时，通常会出现尾随空格。

Answer 13

您是否尝试过使用document.getElementbyID（'id'），其中id是标签的ID，或者是您不知道要查找哪一个的情况

Answer 14

使用JQuery选择器：

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

Answer 15

对于未来的搜索者......以下是FlySwat接受的答案的jQuery-ified版本：

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

Answer 16

我知道这已经过时了，但是我遇到了一些解决方案的麻烦并将它拼凑在一起。我在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/

Answer 17

我已经满足了自己的需求，对某些人有用： 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

我有点惊讶没有人建议使用CSS关系方法？

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

<style>

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

</style>

如果复选框的ID为“XXX” 那么标签可以通过jQuery找到：

$('#XXX + label');

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

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

Answer 19

所有其他答案非常过时!!

您所要做的就是：

input.labels

HTML5已经被所有主流浏览器支持多年。绝对没有理由你必须自己从头开始做这个或者填充它！字面上只需使用input.labels，它就可以解决您的所有问题。

Answer 20

最好的答案非常好，但在大多数情况下，循环遍历所有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;

在大多数情况下，<=>将非常接近或接近输入，这意味着上述函数中的循环只需要迭代很少次。

Answer 21

一个非常简洁的解决方案，使用ES6功能，如解构和隐式返回，将其变成一个方便的一个班轮将是：

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

或者只是获取一个标签，而不是NodeList：

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