-1

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?

8
  • 2
    Possible duplicate stackoverflow.com/questions/4844594/…
    – Damien
    Apr 7, 2018 at 22:55
  • 1
    Your inputs and labels are not matching as of now. Use <label for="foo"> for <input id="foo" />.
    – connexo
    Apr 7, 2018 at 22:59
  • What are you trying to achieve?
    – connexo
    Apr 7, 2018 at 23:00
  • 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 7, 2018 at 23:00
  • Please provide the jQuery that you have tried but failed to get desired results.
    – zer00ne
    Apr 7, 2018 at 23:23

3 Answers 3

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>

6
  • Right. Do you know what the jquery selector would be for targeting those labels?
    – Zorgan
    Apr 7, 2018 at 23:09
  • It is unclear what your are actually trying to achieve. Please describe that.
    – connexo
    Apr 8, 2018 at 6:01
  • Thanks - Are you able to use jQuery code instead of javascript?
    – Zorgan
    Apr 8, 2018 at 8: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 8, 2018 at 9: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 8, 2018 at 13:06
0

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>

2
  • 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 8, 2018 at 6:22
  • Thanks @connexo for the suggestion. Apr 8, 2018 at 17:39
-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>

5
  • 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 labels to the inputs.
    – connexo
    Apr 8, 2018 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 8, 2018 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 8, 2018 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 8, 2018 at 16:04
  • I didn't say you're. Sorry and thank you for corrections.
    – slon
    Apr 8, 2018 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.