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