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

早些时候。

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

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

我有点惊讶，似乎没有人知道你是 完全可以要做的:

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

实际上，在表单本身的标签中添加 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 函数中才能工作。

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

正如前面已经提到的，(目前)排名最高的答案没有考虑到在标签中嵌入输入的可能性。

因为没有人发布过一个没有 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.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");
}
}
}
});

如果你愿意使用 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);
});

有些人已经注意到了多个标签; 如果它们都对 for属性使用相同的值，那么只需使用 querySelectorAll而不是 querySelector，然后循环获取所需的所有内容。

我有点惊讶没有人建议使用 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');
});

QuerySelector (“ label [ for =”+ 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元素是过度而且效率低下的。

下面是一个高效的函数来获得与 input元素一起使用的 label:

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将非常接近或接近输入，这意味着上面函数中的循环只需要迭代非常少的次数。

解决方案一 <label>: 一 <input>

使用 < a href = “ https://www.w3.org/TR/html52/sec-forms.HTML # the-label-element”rel = “ nofollow noReferrer”> HTML 5.2引用 考虑到 <label>使用 for=指向 <input>，标签元素将是一个非空数组，并作为到 <label>元素的链接，访问它的所有属性，包括它的 id=。

function myFunction() {
document.getElementById("p1").innerHTML = "The first label associated with input: <b>" + document.getElementById("input4").labels[0].id + "</b>";


}

<form>
<label id="theLabel" for="input4">my id is "theLabel"</label>
<input name="name1" id="input4" value="my id is input4">
<br>
</form>


<p>Click the "click me" button to see the label properties</p>


<button onclick="myFunction()">click me</button>




<p id="p1"></p>

解决方案多 <label>: 一个 <input>

使用多个 <label>使用 for=，您可以创建一个循环来显示所有的 <label>，如下所示:

function myFunction2() {


var x = document.getElementById("input7").labels;
let text = "";
for (let i = 0; i < x.length; i++) {
text += x[i].id + "<br>";
}
document.getElementById("p7").innerHTML = text;
}

<b>Three labels for one input</b><br>
<br>
<form>
<label id="theLabel2" for="input7">my id is "theLabel2</label><br>
<label id="theLabel3" for="input7">my id is "theLabel3</label><br>
<label id="theLabel4" for="input7">my id is "theLabel4</label><br>
<input name="name1" id="input7" value="my id is input7">
<br>
</form>


<p>Click the "click me" button to see the label properties</p>
<button onclick="myFunction2()">click me2</button>


<p id="p7"></p>