How To Get The Selected Radio Button Label Text Using JQuery

I have a radio button like this on page

Yes&l

Solution 1:

Remove onchange inline handler from HTML. Use on to bind events.

:checked will select the checked radio button. closest will select the parent label and text() will get the label associated with the radio button. e.g. Yes

$('[name="x"]').on('change', function () {

    alert($('[name="x"]:checked').closest('label').text());

});

DEMO

Solution 2:

I would do it a bit different than the accepted answer.

Instead of having events on multiple radio buttons, you can have one on the containing div. Also let just the checked radio trigger the change:

$('#someId').on('change', 'input[name="x"]:checked', function () {
    var label = $(this).siblings('span').text();
    console.log(label);
});

When I have text next to other elements I prefer wrapping the text in span's:

<div id="someId">
    <label class="radio-inline"><input  name="x" type="radio"><span>Yes</span></label>
    <label class="radio-inline"><input  name="x" type="radio"><span>No</span></label>
</div>

A demo: jsfiddle.net/qcxgwe66/

Solution 3:

You can simple pass this in onchange="GetSelectedVal(); like onchange="GetSelectedVal(this);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId">
        <label class="radio-inline"><input  name="x" type="radio" onchange="GetSelectedVal(this);">Yes</label>
        <label class="radio-inline"><input  name="x" type="radio" onchange="GetSelectedVal(this);">No</label>
    </div>
<script>
function GetSelectedVal(ele) {
       alert($(ele).closest('label').text());
   }
  </script>

Share