通过ID进行单选按钮跟踪,具有多个选项,但一次只能选择一个

时间:2016-11-01 16:16:09

标签: javascript jquery

function() {

 return $('input[type=radio][name=sponsor_type_0_amount]:checked').attr('value');
 
  }
<div id="fadder-amount-type-0" class="form-section-sub sponsor-type-selector-item-sub " title="">
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_230" title="amount_230" value="230" type="radio" style="display: none;"><span class="ui-radio ui-radio-state-checked ui-radio-checked"></span>
    <label for="fadder-amount_230" class="ui-radio ui-radio-state-checked ui-radio-checked">230 kr/mån</label>
  </div>
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_250" title="amount_250" value="250" type="radio" style="display: none;"><span class="ui-radio "></span>
    <label for="fadder-amount_250" class="ui-radio ">250 kr/mån</label>
  </div>
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_300" title="amount_300" value="300" type="radio" style="display: none;"><span class="ui-radio "></span>
    <label for="fadder-amount_300" class="ui-radio ">300 kr/mån</label>
  </div>
  <div class="other-amount text-inline" title="">
    <label for="fadder-sponsor_type_0_amount_other">Annat belopp
      <input maxlength="4" size="4" name="sponsor_type_0_amount_other" type="number" id="fadder-sponsor_type_0_amount_other" value="" onkeydown="limitTextArea(this, 10);" onkeyup="limitTextArea(this, 10);">(minst 230 kr/mån)</label>
  </div>
  <p style="margin:5px -20px;">Vill du ge bort ett fadderskap eller bli fadder till mer än ett barn? Kontakta oss på 040 - 12 18 85 eller <a href="mailto:info@barnfonden.se">info@barnfonden.se</a> så hjälper vi dig gärna.</p>
</div>

发送像250这样的正确值,尝试获取标签文本

    <label for="fadder-amount_300" class="ui-radio ">300 kr/mån</label>

on select应该是捕获 - 300 kr /mån

1 个答案:

答案 0 :(得分:0)

要选择与label相关的input文本,请为其附加change事件处理程序并遍历DOM,如下所示:

&#13;
&#13;
$('div#fadder-amount-type-0 input[type=radio]').change(function() {
  var labelText = $(this).nextAll('label').text();
  console.log(labelText);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadder-amount-type-0" class="form-section-sub sponsor-type-selector-item-sub " title="">
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_230" title="amount_230" value="230" type="radio" style="display: none;"><span class="ui-radio ui-radio-state-checked ui-radio-checked"></span>
    <label for="fadder-amount_230" class="ui-radio ui-radio-state-checked ui-radio-checked">230 kr/mån</label>
  </div>
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_250" title="amount_250" value="250" type="radio" style="display: none;"><span class="ui-radio "></span>
    <label for="fadder-amount_250" class="ui-radio ">250 kr/mån</label>
  </div>
  <div class="radio">
    <input class="radio ui-helper-hidden-accessible" name="sponsor_type_0_amount" id="fadder-amount_300" title="amount_300" value="300" type="radio" style="display: none;"><span class="ui-radio "></span>
    <label for="fadder-amount_300" class="ui-radio ">300 kr/mån</label>
  </div>
  <div class="other-amount text-inline" title="">
    <label for="fadder-sponsor_type_0_amount_other">Annat belopp
      <input maxlength="4" size="4" name="sponsor_type_0_amount_other" type="number" id="fadder-sponsor_type_0_amount_other" value="" onkeydown="limitTextArea(this, 10);" onkeyup="limitTextArea(this, 10);">(minst 230 kr/mån)</label>
  </div>
  <p style="margin:5px -20px;">Vill du ge bort ett fadderskap eller bli fadder till mer än ett barn? Kontakta oss på 040 - 12 18 85 eller <a href="mailto:info@barnfonden.se">info@barnfonden.se</a> så hjälper vi dig gärna.</p>
</div>
&#13;
&#13;
&#13;