jquery accessing label of input

Question

I have some HTML like this:

<input type="radio" class="MyRadio" name="TheName">
<label for="TheLabel">the text</label>

How do I change the label's text?

Tried

$('#TheLabel').text('My New Text');

It doesn't work. What's the way to do it?

Thanks.

http://stackoverflow.com/questions/1186416/jquery-selector-for-the-label-of-a-checkbox — kubedan, Apr 04 '12 at 14:47

score 2 · Accepted Answer · answered Apr 04 '12 at 14:23

You've got a few things turned around here. The "for" doesn't identify the label, it identifies the control you are labeling. You'll need to use the "for" correctly and you'll need to give it an ID:

<label for="TheName" id="TheLabel">The Label Text</label>

Then:

$('#TheLabel').text('My New Text');

will work.

Michael Zaporozhets · Answer 2 · 2012-04-04T14:38:33.990

1

use an id for referencing the label which will allow for simpler jquery manipulation

You can then go and change the inside of the tag with whatever you please with the jquery .html() or if you continue to simply just require text manipulation, the .text() function will produce the same results.

Here is a jsfiddle showing an example of your desired outcome: here

The HTML:

<input type="radio" class="MyRadio" name="TheName">
<label id="mylabel" for="TheLabel">the text</label>

The Jquery:

$('#mylabel').text('My New Text');

OR

$('#mylabel').html('My New Text');

edited Apr 04 '12 at 14:38

answered Apr 04 '12 at 14:25

Michael Zaporozhets

23,588
3
30
47

`for` IS an attribute of the `label` element, specifically. http://www.w3schools.com/tags/tag_label.asp – Aaron Apr 04 '12 at 14:26
1

yep just remembered, fixed ;) haha I wasn't even thinking about wether or not this was a form I just typed automatically – Michael Zaporozhets Apr 04 '12 at 14:26

scottheckel · Answer 3 · 2012-04-04T14:32:23.990

Update: looking at @Mark's answer... your code is wrong. The "for" attribute should point to the input. I have cleaned up the answer to fix this.

Match on the attribute equally something and not the #id of the textbox (the label doesn't have an id).

<input type="radio" class="MyRadio" name="TheName" id="TheName">
<label for="TheName">the text</label>

$('label[for="TheName"]').text('This is my new text');

Check out a jsFiddle of it working in action on your HTML.

score 0 · Answer 4 · answered Apr 04 '12 at 14:23

You're using the wrong selector (in this case treating TheLabel as if it were an ID), you can use something like:

$('label[for=TheLabel]').text('My New Text');

You can also change the for for an id to make the code you already have functional.

score 0 · Answer 5 · answered Apr 04 '12 at 14:49

The 'for' attribute is referring to the input, not the label. In order to properly identify the label, the best practice would be to give it an ID. This is a good habit to form as it makes for fast lookups:

HTML:

<input type="radio" class="MyRadio" name="TheName">
<label for="TheName" id="TheLabel">the text</label>

jQuery Selector:

$( '#TheLabel' )

However, if you wanted to grab an element by the for attribute, using the original HTML, you could do so like this:

$( 'label[for=TheLabel]' )

jquery accessing label of input

5 Answers5