Display the text label for selected radio button in Jquery

Question

Hai,

I have a group of radio buttons, i could able to pick the selected value using jQuery but not the text label for selected values.

for ex:

<input type="radio" value="1" name="priority">High</input>
<input type="radio" value="2" name="priority">Medium</input>
<input type="radio" value="3" name="priority">Low</input>

JQUERY CODE TO PICK THE SELECTED VALUE

jQuery('input:radio[name=priority]').change(function()
{
 var priority_type=jQuery(this).attr("value");
        alert(priority_type);
}

OUTPUT would be any one of the following (1,2,3)

Now my requirement is, i would like to display the label of the selected values for eg (high or low or medium) depends on the selection of the radio button.

Hope this helps. let me know if you have any question. Kindly help me in this task

Answer 1

My first thought was that the text() will work correctly. Unfortunately there is no innerText for radio. You can use a label along with the radio and specify the for attribute as the radio button id. Something like

.text()

jQuery('input:radio[name=priority]').change(function()
{
   var id = $(this).attr("id");
   alert($('label[for='+id+']').text());
}

<input type="radio" name="priority" value="1" id="rdLow" />
<label for="rdLow">Low</label> 
<input type="radio" name="priority" value="2" id="rdMedium" />
<label for="rdMedium">Medium</label> 
<input type="radio" name="priority" value="3" id="rdHigh" />
<label for="rdHigh">High</label> 

See a working demo