查找与给定input关联的html标签

比方说，我有一个HTML表单。 每个input / select / textarea都会有一个相应的<label>其中的for属性被设置为它的伴侣的id。 在这种情况下，我知道每个input只会有一个标签。

在JavaScript中给定一个input元素 – 例如通过onkeyup事件 – find相关标签的最好方法是什么？

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，你将不得不search标签。 这是一个将元素作为参数并返回相关标签的函数

 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

我感到有些惊讶，似乎没有人知道你完全被允许去做：

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

不会被任何build议的答案拿起，但会正确地标记input。

下面是一些代码，考虑到这种情况：

 $.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的东西（作为练习留给读者）。
• 使用多个标签对于支持不同的用户代理和辅助技术来说是一件棘手的事情，所以要做好testing并自行承担风险等等。
• 是的，你也可以实现这个，而不使用jQuery。 🙂

Answer 4

HTML5标准中有一个labels属性，指向与input元素关联的标签。

所以你可以使用这样的东西（支持本地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 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

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

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

Answer 8

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 9

如果你愿意使用查询select器（你可以，甚至下到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); }); 

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

Answer 10

你尝试过使用document.getElementbyID（'id'）其中id是标签的id或是你不知道你正在寻找哪一个

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必须在正文onload函数工作。

只是一个想法，为我做的漂亮。

Answer 12

正如已经提到的那样，（当前）最高评分的答案没有考虑在标签内embeddedinput的可能性。

由于没有人发布了一个无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- } 

在这个例子中，为了简单起见，查找表直接由input的HTML元素索引。 这是不高效的，你可以根据自己的喜好进行调整。

如果您想一次获取多个表单的标签，则可以使用表单作为基本元素，也可以使用整个文档。

没有检查不正确的HTML（标签内多个或缺lessinput，与相应的htmlFor id缺lessinput等），但随时添加它们。

您可能需要修剪标签文本，因为input内嵌在标签中时往往会出现尾随空格。

Answer 13

使用JQueryselect器：

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

Answer 14

对于未来的search者…以下是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 15

我知道这是旧的，但我有一些解决scheme的麻烦，拼凑在一起。 我已经在Windows（Chrome，Firefox和MSIE）和OS X（Chrome和Safari）上进行了testing，相信这是最简单的解决scheme。 它适用于这三种附加标签的风格。

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

我已经为我自己的需要，可以有用的人： 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 17

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

在样式表中，您可以引用元素select器中的标签：

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

如果checkbox的ID为“XXX”，那么标签将通过jQuery通过以下方式find：

 $('#XXX + label'); 

您也可以应用.find（'+ label'）从jQuerycheckbox元素返回标签，即在循环时有用：

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

Answer 18

 document.querySelector("label[for=" + vHtmlInputElement.id + "]"); 

Answer 19

所有其他的答案是非常过时的！

你所要做的就是：

 input.labels 

所有主stream浏览器都已经支持HTML5多年了。 绝对没有理由，你应该从头开始自己或填充它！ 从字面上只使用input.labels ，它解决了所有的问题。