如何从输入中获取标签值

Question

我有匹配的input和label元素：

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>

说输入8已经检查，jquery选择器会以什么样的方式定位随附的label元素？

Answer 1

您没有根据input连接label和value，而是在输入上匹配for的标签上使用id：

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>

Answer 2

如果无法正确修改HTML代码，如@connexo所述。

您可以使用此选择器：

".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>

更新

基于@connexo建议。

正确的选择器是：

".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>

Answer 3

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;