javascript - How to get the selected radio button label text using jQuery - Stack Overflow

admin管理员组

文章数量:1327120

I have a radio button like this on page

<div id="someId">
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label>
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">No</label>
</div>

On page load I don't want to set any selection so not using checked property. In my JavaScript function, how can I get the value Yes or No based on the user selection at runtime?

function GetSelectedVal() {
    console.log($('#someId input:radio.........);
}

I have seen similar questions but unable to find solution of this issue.

I have a radio button like this on page

<div id="someId">
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label>
    <label class="radio-inline">
        <input name="x" type="radio" onchange="GetSelectedVal();">No</label>
</div>

On page load I don't want to set any selection so not using checked property. In my JavaScript function, how can I get the value Yes or No based on the user selection at runtime?

function GetSelectedVal() {
    console.log($('#someId input:radio.........);
}

I have seen similar questions but unable to find solution of this issue.

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 26, 2015 at 12:32 MasterAM 16.5k66 gold badges4747 silver badges6868 bronze badges asked Jun 26, 2015 at 11:43 rumirumi 3,2961515 gold badges7575 silver badges115115 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

<script src="https://ajax.googleapis./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>

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/qcxgwe66/

本文标签： javascriptHow to get the selected radio button label text using jQueryStack Overflow