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

Question

假设我有一个html表单.每个input/select/textarea都将对应<label>的for属性设置为其伴随的id.在这种情况下,我知道每个输入只有一个标签.

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

Answer 1

如果你使用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 2

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

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 3

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

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

一些说明:

• 编写代码是为了清晰起见,而不是为了提高性能.可能有更多高性能的替代品.
• 此代码支持一次性获取多个项目的标签.如果这不是您想要的,请根据需要进行调整.
• 这仍然不会照顾aria-labelledby你如何使用它(作为练习留给读者).
• 在支持不同的用户代理和辅助技术时,使用多个标签是一项棘手的工作,因此测试良好,使用风险等等.
• 是的,你也可以在不使用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

document.querySelector（“ label [for =” + vHtmlInputElement.id +“]”）;

这以最简单，最精简的方式回答了这个问题。这使用香草javascript，并且可以在所有主流主流浏览器上使用。

Answer 7

用jquery你可以做点什么

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

Answer 8

所有其他答案都非常过时！！

您所要做的就是：

input.labels

多年来，所有主要浏览器都支持 HTML5。绝对没有理由你必须自己从头开始或 polyfill 它！从字面上看，只需使用input.labels它即可解决您的所有问题。