How to get the text of the selected radio in radio groups

as the name says for example:

<input id="User_Type_0" type="radio" name="User_Type" value="1" checked="checked" /> <label for="User_Type_0">User1</label> <input id="User_Type_1" type="radio" name="User_Type" value="2" /> <label for="User_Type_1">User2</label> 

how can i get the text: User 1

+6
jquery checked text radio-button
source share
5 answers

$ ('input: radio: checked') siblings ('label: first') .. HTML () Strike>


UPDATE:

As Victor noted in the comment section, the previous selector always selects the first label. The next function should work:

 $('input:radio:checked').next('label:first').html() 
+17
source share

how about that?

 var forLabel = $('input:radio:checked').attr("id"); $("label[for='" + forLabel + "']").text(); 
+6
source share

use .next();

 $("input:radio:checked").next().text(); 
+2
source share

How about using the following contiguous selector, + ?

 $('input:radio:checked + label').text(); 

Here is a working demo

+1
source share

This works for me (I used jQuery Mobile):

 var value = $(":radio[name=location]:checked").val(); var text = $(":radio[name=location]:checked").prev("label").text(); 

DOM for this:

 <div id="locations" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all"> <div class="ui-controlgroup-controls "> <div class="ui-radio"> <label for="location0" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off ui-first-child">1439</label> <input type="radio" name="location" id="location0" value="1439"> </div> <div class="ui-radio"> <label for="location1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off ui-last-child">1440</label> <input type="radio" name="location" id="location1" value="1440"> </div> </div> </div> 
+1
source share

All Articles