Jquery - extracting and modifying text from an element

Question

I have some elements in my document like:

<div class="checkbox-inline"><label><input id="mylabel" value="False" type="checkbox">mytext</label></div>

When I try to get the text using:

$("#mylabel").text();

I get an error that text() is not defined on that object. My ids are unique, so my object is in the 0: position in $("#mylabel") but both of these return an empty string for the text:

$("#mylabel").first().text();
$("#mylabel")[0].text();

How can I get the text mytext out of these elements? And how can I programmatically modify it?

I realize now that my problem is slightly different than what I thought it was. Please see: Modifying the text of a label that also contains an input (checkbox) for my follow-up question. Thanks!

The way your code is structured, you can try `$('label').text()`, assuming you only have one label. Add a selector to grab this particular label text — WillardSolutions, Sep 01 '16 at 21:01

trincot · Answer 1 · 2016-09-01T21:00:28.400

5

The value of an input element is not given by text(), but by val().

If you want to get the label text:

$("#mylabel").parent().text()

It is a bit confusing that you give the id mylabel to an input element, which is not the label element.

edited Sep 01 '16 at 21:00

answered Sep 01 '16 at 20:56

trincot

317,000
35
244
286

`val()` gives me `False` (the value of the input - unchecked) – PurpleVermont Sep 01 '16 at 20:58
1

@PurpleVermont what kind of `text()` are you expecting from a **checkbox**? – Scott Sep 01 '16 at 20:59
The label on it, i.e. `mytext` above – PurpleVermont Sep 01 '16 at 21:00
Oh, I think I see my problem, the text is not in the input element, it's in the label element that contains it. – PurpleVermont Sep 01 '16 at 21:01
1

Then select the parent and then the text. The text does not belong to the `input` element, but to the label. – trincot Sep 01 '16 at 21:01

score 1 · Accepted Answer · answered Sep 01 '16 at 21:01

I'm assuming you're trying to access the text of the label element, in this case "mytext"? The reason this isn't working is because the id is on the input element, whcih doesn't actually contain that text

<input id="mylabel" value="False" type="checkbox">

That's the entirety of your input element.

As others have stated, you can get the value of that element using

$("#mylabel").val()

Which will give you "False"

However, if you do need the text "mytext" and don't want to change your markup you can use this

$("#mylabel").parent().text()

Which gets the element with the mylabel id, finds it's parent element (in this case the label element) and then gets the text from that element.

Now that you know that, you might realise that it's easier to just put an id on the label!

Taras · Answer 3 · 2016-09-01T21:02:49.150

0

Its $("#mylabel").html() to get the inner html of tag.

EDIT:

For your particular case it can be:

$("#mylabel").parent().text();

edited Sep 01 '16 at 21:02

answered Sep 01 '16 at 20:58

Taras

105
1
7

This is for an ``; it does not have any inner html. See the other answer – fvgs Sep 01 '16 at 20:59

score 0 · Answer 4 · answered Sep 01 '16 at 21:01

0

If you want the label text.. then you want to use

$('.checkbox-inline label').text();

You're targeting the checkbox itself, not its' label.

answered Sep 01 '16 at 21:01

Scott

21,475
8
43
55

Jquery - extracting and modifying text from an element

4 Answers4