blocks|key|1475877|text|早些时候。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1475878|var+labels+=+document.getElementsByTagName("LABEL"),
++++lookup+=+{},
++++i,+label;

for+(i+=+0;+i+<+labels.length;+i%2B%2B)+{
++++label+=+labels[i];
++++if+(document.getElementById(label.htmlFor))+{
++++++++lookup[label.htmlFor]+=+label;
++++}
}|code-block|syntax|javascript|1475879|稍后..。|1475880|var+myLabel+=+lookup[myInput.id];|1475881|尖酸刻薄的评论:是的，你也可以用JQuery做到这一点。:-)|1475882|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Earlier...

<pre><code>var labels = document.getElementsByTagName("LABEL"),
 lookup = {},
 i, label;

for (i = 0; i &lt; labels.length; i++) {
 label = labels[i];
 if (document.getElementById(label.htmlFor)) {
 lookup[label.htmlFor] = label;
 }
}
</code></pre>

Later...

<pre><code>var myLabel = lookup[myInput.id];
</code></pre>

Snarky comment: Yes, you can also do it with JQuery. :-)

blocks|key|1475960|text|如果你使用的是jQuery，你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1475961|$('label[for="foo"]').hide+();|code-block|syntax|javascript|1475962|如果您没有使用jQuery，则必须搜索标签。下面是一个将元素作为参数并返回相关标签的函数|1475963|function+findLableForControl(el)+{
+++var+idVal+=+el.id;
+++labels+=+document.getElementsByTagName('label');
+++for(+var+i+=+0;+i+<+labels.length;+i%2B%2B+)+{
++++++if+(labels[i].htmlFor+==+idVal)
+++++++++++return+labels[i];
+++}
}|1475964|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using jQuery you can do something like this

<pre><code>$('label[for="foo"]').hide ();
</code></pre>

If you aren't using jQuery you'll have to search for the label. Here is a function that takes the element as an argument and returns the associated label

<pre><code>function findLableForControl(el) {
 var idVal = el.id;
 labels = document.getElementsByTagName('label');
 for( var i = 0; i &lt; labels.length; i++ ) {
 if (labels[i].htmlFor == idVal)
 return labels[i];
 }
}
</code></pre>

blocks|key|1476014|text|使用jquery，您可以执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1476015|var+nameOfLabel+=+someInput.attr('id');
var+label+=+$("label[for='"+%2B+nameOfLabel+%2B+"']");|code-block|syntax|javascript|1476016|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

with jquery you could do something like 

<pre><code>var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");
</code></pre>

blocks|key|1691152|text|首先，扫描页面中的标签，并从实际的表单元素中为标签分配一个引用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691153|var+labels+=+document.getElementsByTagName('LABEL');
for+(var+i+=+0;+i+<+labels.length;+i%2B%2B)+{
++++if+(labels[i].htmlFor+!=+'')+{
+++++++++var+elem+=+document.getElementById(labels[i].htmlFor);
+++++++++if+(elem)
++++++++++++elem.label+=+labels[i];+++++++++
++++}
}|code-block|syntax|javascript|1691154|然后，您可以简单地执行以下操作：|1691155|document.getElementById('MyFormElem').label.innerHTML+=+'Look+ma+this+works!';|1691156|不需要查找数组:)|1691157|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

First, scan the page for labels, and assign a reference to the label from the actual form element:

<pre><code>var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i &lt; labels.length; i++) {
 if (labels[i].htmlFor != '') {
 var elem = document.getElementById(labels[i].htmlFor);
 if (elem)
 elem.label = labels[i]; 
 }
}
</code></pre>

Then, you can simply go:

<pre><code>document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';
</code></pre>

No need for a lookup array :)

blocks|key|1691169|text|使用JQuery选择器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691170|$("label[for="%2BinputElement.id%2B"]")|code-block|syntax|javascript|1691171|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use a JQuery selector:

<pre><code>$("label[for="+inputElement.id+"]")
</code></pre>

blocks|key|1476142|text|对于未来的搜索者..。以下是FlySwat公认答案的jQuery化版：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1476143|var+labels+=+$("label");
for+(var+i+=+0;+i+<+labels.length;+i%2B%2B)+{
++++var+fieldId+=+labels[i].htmlFor;
++++if+(fieldId+!=+"")+{
++++++++var+elem+=+$("#"+%2B+fieldId);
++++++++if+(elem.length+!=+0)+{
++++++++++++elem.data("label",+$(labels[i]));+++
++++++++}
++++}
}|code-block|syntax|javascript|1476144|使用：|1476145|$("#myFormElemId").data("label").css("border","3px+solid+red");|1476146|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For future searchers... The following is a jQuery-ified version of FlySwat's accepted answer:

<pre><code>var labels = $("label");
for (var i = 0; i &lt; labels.length; i++) {
 var fieldId = labels[i].htmlFor;
 if (fieldId != "") {
 var elem = $("#" + fieldId);
 if (elem.length != 0) {
 elem.data("label", $(labels[i])); 
 }
 }
}
</code></pre>

Using:

<pre><code>$("#myFormElemId").data("label").css("border","3px solid red");
</code></pre>

blocks|key|1691235|text|$("label[for='inputId']").text()|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1691236|这帮助我使用输入元素的ID来获取其标签。|unstyled|1691237|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("label[for='inputId']").text()
</code></pre>

This helped me to get the label of an input element using its ID.

blocks|key|1691307|text|来自Gijs的答案对我来说是最有价值的，但不幸的是扩展不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691308|这是一个重写的扩展，它可能会对某些人有所帮助：|1691309|jQuery.fn.getLabels+=+function+()+{
++++return+this.map(function+()+{
++++++++var+parentLabels+=+$(this).parents('label').get();
++++++++var+associatedLabels+=+this.id+?+associatedLabels+=+$("label[for='"+%2B+this.id+%2B+"']").get()+:+[];
++++++++return+parentLabels.concat(associatedLabels);
++++});
};|code-block|syntax|javascript|1691310|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Answer from Gijs was most valuable for me, but unfortunately the extension does not work.

Here's a rewritten extension that works, it may help someone:

<pre><code>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);
 });
};
</code></pre>

blocks|key|1691388|text|HTML5+standard中有一个labels属性，它指向与输入元素相关联的标签。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1691389|所以你可以使用类似这样的东西(支持原生labels属性，但在浏览器不支持的情况下使用后备来检索标签)……|1691390|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='"+%2B+id+%2B+"']"));

++++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;
};|code-block|syntax|javascript|1691391|如果你使用的是jQuery，那就更简单了。|1691392|var+getLabelsForInputElement+=+function(element)+{
++++var+labels+=+$();
++++var+id+=+element.id;

++++if+(element.labels)+{
++++++++return+element.labels;
++++}

++++id+&&+(labels+=+$("label[for='"+%2B+id++%2B+"']")));

++++labels+=+labels.add($(element).parents("label"));

++++return+labels;
};|1691393|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/2012/WD-html5-20121025/the-label-element.html#dom-lfe-labels^0|I|6|0|E|0|0|J|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

There is a <code>labels</code> property in the <a href="http://www.w3.org/TR/2012/WD-html5-20121025/the-label-element.html#dom-lfe-labels" rel="noreferrer">HTML5 standard</a> which points to labels which are associated to an input element.

So you could use something like this (support for native <code>labels</code> property but with a fallback for retrieving labels in case the browser doesn't support it)...

<pre><code>var getLabelsForInputElement = function(element) {
 var labels = [];
 var id = element.id;

 if (element.labels) {
 return element.labels;
 }

 id &amp;&amp; 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) =&gt; {
 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;
};
</code></pre>

Even easier if you're using jQuery...

<pre><code>var getLabelsForInputElement = function(element) {
 var labels = $();
 var id = element.id;

 if (element.labels) {
 return element.labels;
 }

 id &amp;&amp; (labels = $("label[for='" + id + "']")));

 labels = labels.add($(element).parents("label"));

 return labels;
};
</code></pre>

blocks|key|1476360|text|实际上，将id添加到表单本身的标签中要容易得多，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1476361|<label+for="firstName"+id="firstNameLabel">FirstName:</label>

<input+type="text"+id="firstName"+name="firstName"+class="input_Field"+
+++++++pattern="%5E[a-zA-Z\s\-]{2,25}$"+maxlength="25"
+++++++title="Alphabetic,+Space,+Dash+Only,+2-25+Characters+Long"+
+++++++autocomplete="on"+required
/>|code-block|syntax|javascript|1476362|然后，您可以简单地使用如下内容：|1476363|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";
}|1476364|javascript必须在body+onload函数中才能工作。|1476365|这只是一个想法，对我来说效果很好。|1476366|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

It is actually far easier to add an id to the label in the form itself, for example:

<pre><code>&lt;label for="firstName" id="firstNameLabel"&gt;FirstName:&lt;/label&gt;

&lt;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
/&gt;
</code></pre>

Then, you can simply use something like this:

<pre><code>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";
}
</code></pre>

The javascript does have to be in a body onload function to work.

Just a thought, works beautifully for me.

blocks|key|1691532|text|正如已经提到的，(目前)最高评级的答案没有考虑到在标签中嵌入输入的可能性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691533|由于没有人发布过JQuery免费的答案，下面是我的答案：|1691534|var+labels+=+form.getElementsByTagName+('label');
var+input_label+=+{};
for+(var+i+=+0+;+i+!=+labels.length+;+i%2B%2B)
{
++++var+label+=+labels[i];
++++var+input+=+label.htmlFor
++++++++++++++?+document.getElementById(label.htmlFor)
++++++++++++++:+label.getElementsByTagName('input')[0];
++++input_label[input.outerHTML]+=+
++++++++(label.innerText+%7C%7C+label.textContent);+//+innerText+for+IE8-
}|code-block|syntax|javascript|1691535|在本例中，为简单起见，查找表直接由输入的HTML元素索引。这几乎没有效率，你可以随心所欲地调整它。|1691536|如果要一次获取多个表单的标签，则可以使用表单作为基本元素，也可以使用整个文档。|1691537|不会检查不正确的超文本标记语言(标签中有多个或缺少输入，缺少对应的htmlFor+id等)，但可以随意添加它们。|1691538|您可能希望修剪标签文本，因为当输入嵌入到标签中时，通常会出现尾随空格。|1691539|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

As it has been already mentionned, the (currently) top-rated answer does not take into account the possibility to embed an input inside a label.

Since nobody has posted a JQuery-free answer, here is mine :

<pre><code>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-
}
</code></pre>

In this example, for the sake of simplicity, the lookup table is directly indexed by the input HTML elements. This is hardly efficient and you can adapt it however you like.

You can use a form as base element, or the whole document if you want to get labels for multiple forms at once.

No checks are made for incorrect HTML (multiple or missing inputs inside labels, missing input with corresponding htmlFor id, etc), but feel free to add them.

You might want to trim the label texts, since trailing spaces are often present when the input is embedded in the label.

blocks|key|1691594|text|我知道这是旧的，但我遇到了一些问题的解决方案，并拼凑在一起。我已经在Windows+(Chrome，Firefox和MSIE)和OS+X+(Chrome和Safari)上测试过了，我相信这是最简单的解决方案。它适用于这三种附加标签的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691595|<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>|code-block|syntax|javascript|1691596|使用jQuery：|1691597|$(".c123").click(function()+{
++++$cb+=+$(this);
++++$lb+=+$(this).parent();
++++alert(+$cb.attr('id')+%2B+'+=+'+%2B+$lb.text()+);
});|1691598|我的JSFiddle：http://jsfiddle.net/pnosko/6PQCw/|offset|length|1691599|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pnosko/6PQCw/^0|0|0|0|0|B|X|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I know this is old, but I had trouble with some solutions and pieced this together. I have tested this on Windows (Chrome, Firefox and MSIE) and OS X (Chrome and Safari) and believe this is the simplest solution. It works with these three style of attaching a label.

<pre><code>&lt;label&gt;&lt;input type="checkbox" class="c123" id="cb1" name="item1"&gt;item1&lt;/label&gt;

&lt;input type="checkbox" class="c123" id="cb2" name="item2"&gt;item2&lt;/input&gt;

&lt;input type="checkbox" class="c123" id="cb3" name="item3"&gt;&lt;label for="cb3"&gt;item3&lt;/label&gt;
</code></pre>

Using jQuery:

<pre><code>$(".c123").click(function() {
 $cb = $(this);
 $lb = $(this).parent();
 alert( $cb.attr('id') + ' = ' + $lb.text() );
});
</code></pre>

My JSFiddle: <a href="http://jsfiddle.net/pnosko/6PQCw/" rel="nofollow">http://jsfiddle.net/pnosko/6PQCw/</a>

blocks|key|1691626|text|我为我自己的需要做的，可以对某人有用：JSFIDDLE|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1691627|$("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");
++++++++++++}
++++++++}
++++}
});|code-block|syntax|javascript|1691628|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/itsazzad/pq8w1e9p/1/^0|J|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I have made for my own need, can be useful for somebody: <a href="http://jsfiddle.net/itsazzad/pq8w1e9p/1/" rel="nofollow">JSFIDDLE</a>

<pre><code>$("input").each(function () {
 if ($.trim($(this).prev('label').text()) != "") {
 console.log("\nprev&gt;children:");
 console.log($.trim($(this).prev('label').text()));
 } else {
 if ($.trim($(this).parent('label').text()) != "") {
 console.log("\nparent&gt;children:");
 console.log($.trim($(this).parent('label').text()));
 } else {
 if ($.trim($(this).parent().prev('label').text()) != "") {
 console.log("\nparent&gt;prev&gt;children:");
 console.log($.trim($(this).parent().prev('label').text()));
 } else {
 console.log("NOTFOUND! So set your own condition now");
 }
 }
 }
});
</code></pre>

blocks|key|1691697|text|如果您愿意使用querySelector+(您可以，甚至可以使用IE9，有时还可以使用IE8!)，那么另一种方法就变得可行了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1691698|如果您的表单域有一个ID，并且您使用了标签的for属性，那么在现代JavaScript中这就变得非常简单：|style|CODE|1691699|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='+%2B+inputId+%2B+']');
++++console.log(label.textContent);
});|code-block|syntax|javascript|1691700|有些人注意到了多个标签；如果它们都使用相同的for属性值，那么只需使用querySelectorAll而不是querySelector并遍历，就可以获得所需的所有内容。|1691701|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=queryselector^0|7|D|0|0|M|3|0|0|M|3|Z|G|1I|D|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]|$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

If you're willing to use <a href="http://caniuse.com/#search=queryselector" rel="nofollow">querySelector</a> (and you can, even down to IE9 and sometimes IE8!), another method becomes viable.

If your form field has an ID, and you use the label's <code>for</code> attribute, this becomes pretty simple in modern JavaScript:

<pre><code>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);
});
</code></pre>

Some have noted about multiple labels; if they all use the same value for the <code>for</code> attribute, just use <code>querySelectorAll</code> instead of <code>querySelector</code> and loop through to get everything you need.

blocks|key|1691775|text|我有点惊讶，没有人建议使用CSS关系方法？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1691776|在样式表中，您可以引用元素选择器中的标签：|1691777|<style>

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

</style>|code-block|syntax|javascript|1691778|如果复选框的id为'XXX‘，则可以通过以下方式通过jQuery找到该标签：|1691779|$('#XXX+%2B+label');|1691780|您还可以应用标签(‘%2B.find’)从jQuery复选框元素返回标签，即在循环时很有用：|1691781|$('input[type=checkbox]').each(+function(){
+++$(this).find('%2B+label');
});|1691782|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I am bit surprised no one is suggesting to use the CSS relationship method?

in a style sheet you can reference a label from the element selector:

<pre><code>&lt;style&gt;

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

&lt;/style&gt;
</code></pre>

if the checkbox has an id of 'XXX'
then the label would be found through jQuery by:

<pre><code>$('#XXX + label');
</code></pre>

You can also apply .find('+ label') to return the label from a jQuery checkbox element, ie useful when looping:

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

blocks|key|1476712|text|document.querySelector("labelfor=“%2B+vHtmlInputElement.id+%2B+"")；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1476713|这以最简单、最简洁的方式回答了问题。它使用的是普通的javascript，可以在所有主流浏览器上正常工作。|1476714|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

This answers the question in the simplest and leanest manner.
This uses vanilla javascript and works on all main-stream proper browsers.

blocks|key|1476776|text|使用解构和隐式返回等ES6功能将其转换为方便的一行程序将是一个非常简洁的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1476777|const+getLabels+=+({+labels,+id+})+=>+labels+%7C%7C+document.querySelectorAll(`label[for=${id}]`)|code-block|syntax|javascript|1476778|或者简单地获取一个标签，而不是一个NodeList：|1476779|const+getFirstLabel+=+({+labels,+id+})+=>+labels+&&+labels[0]+%7C%7C+document.querySelector(`label[for=${id}]`)|1476780|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

A really concise solution using ES6 features like destructuring and implicit returns to turn it into a handy one liner would be: 

<pre><code>const getLabels = ({ labels, id }) =&gt; labels || document.querySelectorAll(`label[for=${id}]`)
</code></pre>

Or to simply get one label, not a NodeList: 

<pre><code>const getFirstLabel = ({ labels, id }) =&gt; labels &amp;&amp; labels[0] || document.querySelector(`label[for=${id}]`)
</code></pre>

blocks|key|1476855|text|最好的答案非常好用，但在大多数情况下，循环遍历所有label元素是过度和低效的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1476856|下面是一个用于获取input元素附带的label的有效函数：|1476857|function+getLabelForInput(id)
{
++++var+el+=+document.getElementById(id);
++++if+(!el)
++++++++return+null;
++++var+elPrev+=+el.previousElementSibling;
++++var+elNext+=+el.nextElementSibling;
++++while+(elPrev+%7C%7C+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;
}|code-block|syntax|javascript|1476858|对我来说，这一行代码就足够了：|1476859|el+=+document.getElementById(id).previousElementSibling;|1476860|在大多数情况下，label将非常接近或紧邻输入，这意味着上面函数中的循环只需要迭代非常少的次数。|1476861|entityMap^0|P|5|0|9|5|J|5|0|0|0|0|8|5|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

The best answer works perfectly fine but in most cases, it is overkill and inefficient to loop through all the <code>label</code> elements.

Here is an efficent function to get the <code>label</code> that goes with the <code>input</code> element:

<pre><code>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;
}
</code></pre>

For me, this one line of code was sufficient:

<pre><code>el = document.getElementById(id).previousElementSibling;
</code></pre>

In most cases, the <code>label</code> will be very close or next to the input, which means the loop in the above function only needs to iterate a very small number of times.

Let's say I have an html form. Each input/select/textarea will have a corresponding <code>&lt;label&gt;</code> with the <code>for</code> attribute set to the id of it's companion. In this case, I know that each input will only have a single label.

Given an input element in javascript &mdash; via an onkeyup event, for example &mdash; what's the best way to find it's associated label?

Find html label associated with a given input

Windows

jQuery

假设我有一个html表单。每个输入/选择/文本区域都有一个对应的<label>，其for属性被设置为它的伙伴的id。在这种情况下，我知道每个输入将只有一个标签。在javascript中给定一个input元素-例如，通过onkeyup事件-找到它的关联标签的最佳方法是什么？

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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