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

Question

 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> 

Sending Correct value like 250, try get label text

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

on select should be capture - 300 kr/mån

Answer 1

To select the text of the label related to the input , attach a change event handler to it and traverse the DOM, like this:

 $('div#fadder-amount-type-0 input[type=radio]').change(function() { var labelText = $(this).nextAll('label').text(); console.log(labelText); }); 

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