How I can get the text of a checkbox?

Question

I have the following set of checkboxes:

<ul class="checkbox_list">
 <li><input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" />&nbsp;<label for="mensajes_receptores_list_5">Carlos (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="1" id="mensajes_receptores_list_1" />&nbsp;<label for="mensajes_receptores_list_1">Jorge (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="3" id="mensajes_receptores_list_3" />&nbsp;<label for="mensajes_receptores_list_3">Marisa (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="6" id="mensajes_receptores_list_6" />&nbsp;<label for="mensajes_receptores_list_6">Christian (Apuntes)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="4" id="mensajes_receptores_list_4" />&nbsp;<label for="mensajes_receptores_list_4">Julieta (Contable)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="2" id="mensajes_receptores_list_2" />&nbsp;<label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul>

Using javascript, how I can access the text of each item. For example, for the element with id = "mensajes_receptores_list_5" I want to get the text "Carlos (Admin)"

If you are entertaining jQuery solutions, it would be best to tag with jQuery — kjelderg, Oct 17 '13 at 18:59
kjelderg: OK, Ok I did not know what the best solution for my problem, I apologize — Jorge H, Oct 17 '13 at 19:04
No apologies. I was just trying to help get things tagged properly — kjelderg, Oct 17 '13 at 20:49
JorgeH never mentioned JQuery in his question, except in the tag @kjelderg asked him to add, so I'm not sure if it should have that tag, as pure JS solutions are probably going to be better. — Solomon Ucko, Nov 05 '16 at 21:05

score 6 · Answer 1 · edited Nov 06 '16 at 00:51

6

I would approach it like this:

function getLabelText(needle) {
    var labels = document.getElementsByTagName("label");
    var texts = [];
    for (var i = 0; i < labels.length; i++) {
        var label = labels[i];
        if(label.getAttribute("for") == needle) {
            console.log(label.innerText);
            texts.push(label.innerText);
        }
    }
    return texts;
}

edited Nov 06 '16 at 00:51

Solomon Ucko

5,724
3
24
45

answered Oct 17 '13 at 18:37

kjelderg

392
3
5

1

Thanks for providing a non-jQuery solution. I just wanted to add that in my case .value was returning "undefined" so I used .innerText and that worked well. – dyslexicanaboko Dec 20 '13 at 16:29

score 4 · Accepted Answer · answered Oct 17 '13 at 18:34

4

By Jquery

 function getLabel(id)
   {
  return $("#"+id).next("label").html();
   }

  //id of checkbox ,you want to get label of
  var label=getLabel('mensajes_receptores_list_1'); 
  alert(label);

Jsfiddle http://jsfiddle.net/pcQgE/1/

answered Oct 17 '13 at 18:34

Manish

1,437
2
11
17

Just a note, this works for the example where the label comes after the checkbox but not for the more general case of labels and checkboxes. – kjelderg Oct 17 '13 at 19:02
I have a stands immediately behind . However, this solution cannot find the . The result is always returned null value – NoName Sep 21 '15 at 07:54

Hat · Answer 3 · 2018-09-22T22:09:51.123

Here's a modern vanilla JS solution that should work for the general case of finding the label associated with a checkbox:

function getCheckboxLabel(checkbox) {
    if (checkbox.parentNode.tagName === 'LABEL') {
        return checkbox.parentNode
    }
    if (checkbox.id) {
        return document.querySelector('label[for="' + checkbox.id + '"]')
    }
}

Because according to this SO answer, there are two ways to create the association between the <input> and <label>:

First, you can wrap the label element around the input element:
<label>Input here:
    <input type="text" name="theinput" id="theinput">
</label>
The other way is to use the for attribute, giving it the ID of the associated input:
<label for="theinput">Input here:</label>
<input type="text" name="whatever" id="theinput">

So to answer the original question of how to get the text, you would simply use this function along with textContent:

function getCheckboxLabel(checkbox) {
    if (checkbox.parentNode.tagName === 'LABEL') {
        return checkbox.parentNode
    }
    if (checkbox.id) {
        return document.querySelector('label[for="' + checkbox.id + '"]')
    }
}

let checkboxes = document.querySelectorAll('input[type=checkbox]')
checkboxes.forEach((checkbox) => {
    let label = getCheckboxLabel(checkbox)
    if (label) {
        console.log('label text:', label.textContent)
    } else {
        console.log('could not find the label of', checkbox)
    }
})

<!-- Sample HTML taken from OP -->
<ul class="checkbox_list">
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" />&nbsp;<label for="mensajes_receptores_list_5">Carlos (Admin)</label></li>
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="1" id="mensajes_receptores_list_1" />&nbsp;<label for="mensajes_receptores_list_1">Jorge (Admin)</label></li>
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="3" id="mensajes_receptores_list_3" />&nbsp;<label for="mensajes_receptores_list_3">Marisa (Admin)</label></li>
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="6" id="mensajes_receptores_list_6" />&nbsp;<label for="mensajes_receptores_list_6">Christian (Apuntes)</label></li>
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="4" id="mensajes_receptores_list_4" />&nbsp;<label for="mensajes_receptores_list_4">Julieta (Contable)</label></li>
    <li><input name="mensajes[receptores_list][]" type="checkbox" value="2" id="mensajes_receptores_list_2" />&nbsp;<label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul>

score 1 · Answer 4 · answered Oct 17 '13 at 18:26

1

you can use sibling selector:

var id = "mensajes_receptores_list_5"
alert( document.querySelector("#"+id+"+ label").innerText );

answered Oct 17 '13 at 18:26

gp.

8,074
3
38
39

score 0 · Answer 5 · answered Oct 17 '13 at 18:24

This will iterate through and print all of the text to the console. You could also get a specific one by using if(i == 3) for example.

var labels = document.getElementsByTagName('label');

for(var i = 0; i < labels.length; i++)
{
    console.log(labels[i].innerHTML);
}

http://jsfiddle.net/pcQgE/

score 0 · Answer 6 · answered Oct 17 '13 at 18:27

0

You can use jQuery. Example:

var label = $("#mensajes_receptores_list_5").next("label").text();
alert(label)

answered Oct 17 '13 at 18:27

R. Oosterholt

7,720
2
53
77

score 0 · Answer 7 · answered May 24 '19 at 19:01

Most modern browsers allow you to access the label(s) associated with an input element via the labels property.

const inputs = document.getElementsByTagName("input");
console.log(`First label for first element is: $inputs[0].labels[0].innerText`)

From the HTML Spec:

Labelable elements and all input elements have a live NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable elements that are not form-associated custom elements, and the labels IDL attribute of input elements, on getting, must return that NodeList object, and that same value must always be returned, unless this element is an input element whose type attribute is in the Hidden state, in which case it must instead return null.

Browser compatibility can be found at this caniuse.com link

How I can get the text of a checkbox?

7 Answers7

Linked