How to get label value from input

Question

I have matching input and label elements:

console.log('LABEL:', $('label[for="8"]'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad_numbers">
  <input type="radio" name="ad_pos" value="6" />6<br>
  <input type="radio" name="ad_pos" value="7" />7<br>
  <input type="radio" name="ad_pos" value="8" checked/>8<br>
  <input type="radio" name="ad_pos" value="9" />9<br>
  <input type="radio" name="ad_pos" value="10" />10<br>
  <input type="radio" name="ad_pos" value="11" />11<br>
  <input type="radio" name="ad_pos" value="12" />12<br>
</div>

<div class="ad_numbers ad_prices">
  <label for="6" id="6">$50</label>
  <label for="7" id="7">$45</label>
  <label for="8" id="8">$40</label>
  <label for="9" id="9">$35</label>
  <label for="10" id="10">$30</label>
  <label for="11" id="11">$25</label>
  <label for="12" id="12">$20</label>
</div>

Say input 8 is checked, what would the jquery selector look like to target the accompanying label element?

Possible duplicate https://stackoverflow.com/questions/4844594/jquery-select-the-associated-label-element-of-a-input-field — Damien, Apr 07 '18 at 22:55
Your inputs and labels are not matching as of now. Use `` for ``. — connexo, Apr 07 '18 at 22:59
You got it backwards a label for attribute value should be the ID of an input. So move the id to the inputs. — zer00ne, Apr 07 '18 at 23:00
Please provide the jQuery that you have tried but failed to get desired results. — zer00ne, Apr 07 '18 at 23:23
The following selector does not work: `console.log('LABEL:', $('label[for="6"]'));` after using @connexo's code — Zorgan, Apr 07 '18 at 23:50
Added Javascript example code that on `change` console.logs the corresponding label. — connexo, Apr 08 '18 at 06:14
Added the `console.log` statement from your comment to your code showing that **it works as expected**. — connexo, Apr 08 '18 at 06:20

connexo · Answer 1 · 2018-04-08T07:26:15.870

1

You don't connect input and label based on value, but using for on the label matching id on the input:

const ad_pos_radios = document.querySelectorAll('[name=ad_pos]')
const ad_pos_labels = document.querySelectorAll('ad_numbers.ad_prices label')

for (const ad of Array.from(ad_pos_radios)) {
  ad.addEventListener('change', () => {
    console.log(document.querySelector(':checked').labels[0].textContent);
  })
}

<div class="ad_numbers">
  <input type="radio" name="ad_pos" id="6" value="6" />6<br>
  <input type="radio" name="ad_pos" id="7" value="7" />7<br>
  <input type="radio" name="ad_pos" id="8" value="8" checked/>8<br>
  <input type="radio" name="ad_pos" id="9" value="9" />9<br>
  <input type="radio" name="ad_pos" id="10" value="10" />10<br>
  <input type="radio" name="ad_pos" id="11" value="11" />11<br>
  <input type="radio" name="ad_pos" id="12" value="12" />12<br>
</div>

<div class="ad_numbers ad_prices">
  <label for="6">$50</label>
  <label for="7">$45</label>
  <label for="8">$40</label>
  <label for="9">$35</label>
  <label for="10">$30</label>
  <label for="11">$25</label>
  <label for="12">$20</label>
</div>

edited Apr 08 '18 at 07:26

answered Apr 07 '18 at 22:58

connexo

53,704
14
91
128

Right. Do you know what the jquery selector would be for targeting those labels? – Zorgan Apr 07 '18 at 23:09
It is unclear what your are actually trying to achieve. Please describe that. – connexo Apr 08 '18 at 06:01
Thanks - Are you able to use jQuery code instead of javascript? – Zorgan Apr 08 '18 at 08:08
Why would you want that? jQuery is not helpful here. The earlier you start learning to do things without jQuery, the better. – connexo Apr 08 '18 at 09:07
Using it as an array and loop through it is not necessary, as long as you get right result for selected radio box. – slon Apr 08 '18 at 13:06
@AslanShemilov Why not simply learn some basic Javascript instead of posting misleading and wrong comments? You are looping throught the exact same array, only you are doing it using jQuery. – connexo Apr 08 '18 at 15:54

Danny Fardy Jhonston Bermúdez · Answer 2 · 2018-04-08T17:59:57.933

If you can not modify the HTML code properly, as mentioned by @connexo.

You can use this selector:

".ad_numbers input[type=radio][checked]"

Something like this:

$(function() {
  var checked = $(".ad_numbers input[type=radio][checked]")[0];
  console.log($("#" + checked.value).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:

<div class="ad_numbers">
  <input type="radio" name="ad_pos" value="6" />6<br>
  <input type="radio" name="ad_pos" value="7" />7<br>
  <input type="radio" name="ad_pos" value="8" checked/>8<br>
  <input type="radio" name="ad_pos" value="9" />9<br>
  <input type="radio" name="ad_pos" value="10" />10<br>
  <input type="radio" name="ad_pos" value="11" />11<br>
  <input type="radio" name="ad_pos" value="12" />12<br>
</div>

<div class="ad_numbers ad_prices">
  <label for="6" id="6">$50</label>
  <label for="7" id="7">$45</label>
  <label for="8" id="8">$40</label>
  <label for="9" id="9">$35</label>
  <label for="10" id="10">$30</label>
  <label for="11" id="11">$25</label>
  <label for="12" id="12">$20</label>
</div>

Update:

Based on @connexo suggestion.

The proper selector is:

".ad_numbers input[type=radio]:checked"

$(function() {
  var checked = $(".ad_numbers input[type=radio]:checked")[0];
  console.log($("#" + checked.value).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
down vote favorite I have matching input and label elements:

<div class="ad_numbers">
  <input type="radio" name="ad_pos" value="6" />6<br>
  <input type="radio" name="ad_pos" value="7" />7<br>
  <input type="radio" name="ad_pos" value="8" checked/>8<br>
  <input type="radio" name="ad_pos" value="9" />9<br>
  <input type="radio" name="ad_pos" value="10" />10<br>
  <input type="radio" name="ad_pos" value="11" />11<br>
  <input type="radio" name="ad_pos" value="12" />12<br>
</div>

<div class="ad_numbers ad_prices">
  <label for="6" id="6">$50</label>
  <label for="7" id="7">$45</label>
  <label for="8" id="8">$40</label>
  <label for="9" id="9">$35</label>
  <label for="10" id="10">$30</label>
  <label for="11" id="11">$25</label>
  <label for="12" id="12">$20</label>
</div>

Your selector `input[type=radio][checked]` will always return the element with the ***attribute*** `checked` - which will never change, no matter which radio button is currently selected. If you want the *currently* checked element, use `:checked` pseudo selector instead. — connexo, Apr 08 '18 at 06:22

score -1 · Answer 3 · edited Apr 08 '18 at 16:09

-1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type='text/javascript'>
  $(function() {
    $("input[type=radio][name=ad_pos]").on("change", function() {
      var selected = $("input[type=radio][name=ad_pos]:checked").val();
      console.log(selected);
      if (selected) {
        var label = $('.ad_numbers.ad_prices label[for="' + selected + '"]').text();
        console.log(label);
      }
    });
  });
</script>

<div class="ad_numbers">
  <input type="radio" name="ad_pos" value="6" checked />6<br>
  <input type="radio" name="ad_pos" value="7" />7<br>
  <input type="radio" name="ad_pos" value="8" />8<br>
  <input type="radio" name="ad_pos" value="9" />9<br>
  <input type="radio" name="ad_pos" value="10" />10<br>
  <input type="radio" name="ad_pos" value="11" />11<br>
  <input type="radio" name="ad_pos" value="12" />12<br>
</div>

<div class="ad_numbers ad_prices">
  <label for="6" id="6">$50</label>
  <label for="7" id="7">$45</label>
  <label for="8" id="8">$40</label>
  <label for="9" id="9">$35</label>
  <label for="10" id="10">$30</label>
  <label for="11" id="11">$25</label>
  <label for="12" id="12">$20</label>
</div>

edited Apr 08 '18 at 16:09

connexo

53,704
14
91
128

answered Apr 07 '18 at 23:17

slon

1,002
1
8
12

Check the DOM api for HTMLInputElements. They have a property called `labels` which holds an array of all attached label elements. Furthermore you solution does not link the `label`s to the `input`s. – connexo Apr 08 '18 at 10:41
If you prefer use array for all attached labels, doesn't mean that everyone has to follow your preference. I gave clear answer to the question. – slon Apr 08 '18 at 13:05
This site is to give a hand with solution for problems in code, not to show/hide your competence and not to show the ability of show off. – slon Apr 08 '18 at 16:02
I'm not shwoing off, I'm correcting your misleading and low quality/wrong comments. I hope you are willing to learn instead of continuing to insist on your lack of knowledge. – connexo Apr 08 '18 at 16:04
I didn't say you're. Sorry and thank you for corrections. – slon Apr 08 '18 at 16:05

How to get label value from input

3 Answers3