user4159594
user4159594

Reputation:

Get bootstrap radio button text - jquery

I'm using bootstrap and I find it confusing when trying to extract the label name. How do I get the selected label text? (e.g. Furniture or Fruits)

<div class="input-group">
     <span class="input-group-addon">
     <input type="radio" name="radioGroup" value="myval1" /></span>
     <input class="form-control" value="Furniture" disabled>
</div>
<div class="input-group">
     <span class="input-group-addon">
     <input type="radio" name="radioGroup" value="myval2" /></span>
     <input class="form-control" value="Fruits" disabled>
</div>

I tried these but did not give the label text:

alert($(  $(":radio[name=radioGroup]:checked").prop("labels") ).text());


alert($('input[name="radioGroup"]:checked').text());


alert($('input[name="radioGroup"]:checked + label').text());

Upvotes: 0

Views: 1801

Answers (3)

Rahul
Rahul

Reputation: 2307

In your scenario you just need to get the value of selected radio button. For your better understanding have a lookto this JS Fiddle link

You can use the selected DOM element as::

alert($("input[name='radioGroup']:checked").closest(".input-group").find(".form-control").val())

Upvotes: 1

Mohd. Shaukat Ali
Mohd. Shaukat Ali

Reputation: 752

You can try this...

$('input[name="radioGroup"]:checked').parents('.input-group').find('.form-control').val()

OR

$('input[name="radioGroup"]:checked').parent().next().val()

Upvotes: 0

mikeybob6
mikeybob6

Reputation: 1

Try using .val() then follow the tree from the checkbox up to its containing div and back down to the value in the associated input.

alert($("input[name=radioGroup]:checked").parent(".input-group-addon").parent(".input-group").children("input.form-control").val());

Upvotes: 0

Related Questions