CODEWITHSUNDEEP
jquery
Pallavipradeep
Pallavipradeep

Reputation: 101

How to get value of a radio button when selected?

I have my html code like this. From this piece of code i would like to get Radio button value when user selects(checked) that value. How to get that value. I got solutions when user clicks on a button or the function has to be called. But i require solution using jQuery when user checks it.

HTML code:

<div id="Report_Name" class="leaf">
    <fieldset class="control select multiple" title="">
        <legend>* Select Report Name</legend>
        <ul class="list inputSet sizable">                <li>
                <div class="control radio">
                    <input checked="checked" class="" id="Report_Name1" type="radio" name="Report_Name_option" value="4">
                    <label class="wrap" for="Report_Name1" title="">
                        ALL&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name2" type="radio" name="Report_Name_option" value="1">
                    <label class="wrap" for="Report_Name2" title="">
                        Cash&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name3" type="radio" name="Report_Name_option" value="2">
                    <label class="wrap" for="Report_Name3" title="">
                        FDR&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Report_Name4" type="radio" name="Report_Name_option" value="3">
                    <label class="wrap" for="Report_Name4" title="">
                        Summary&nbsp;
                    </label>
                </div>
            </li>
            &nbsp;</ul>
    </fieldset>
    <span class="warning"></span>
    <div class="resizeOverlay hidden"></div>
    <div class="sizer vertical" style="position: relative;"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></div>
</div>

Upvotes: 0

Views: 1240

Answers (5)

v2solutions.com
v2solutions.com

Reputation: 1439

You need to attach .change event with Radio Button , so after that you can get the value of checked radio button using :checked

In below code we are filtering radio button by name and attaching change event to it and then finding the checked value of radio

$("input:radio[name=Report_Name_option]").change(function(){
  console.log($('input:radio[name=Report_Name_option]:checked').val());

});

Upvotes: 1

Jai
Jai

Reputation: 74738

You can try this:

$('#Report_Name').find('[type="radio"]').on('change', function(){
   console.log(this.value);
});

You have to find the radios in this #Report_Name div and apply a .change() event to it and get the value of that radio. As you have one radio selected by default so you can get it with triggering the change event on load.

Demo

Upvotes: 0

balexandre
balexandre

Reputation: 75113

example: Demo in JsBin

$(function() {
  $(".inputSet input[type=radio]").change(function() {
    // for every change on the radio selection
    checkRadioSelection();
  });

  // so you get the default selection
  checkRadioSelection();
});

function checkRadioSelection()
{
  var r = $(".inputSet input[type=radio]:checked");
  $(".warning").text("You have selected: " + r.val() );
}

Upvotes: 0

KM123
KM123

Reputation: 1387

After a quick search I found a pretty much complete answer for you. Anyway you want to try something like this:

$("input:radio[name=Report_Name_option]").click(function() {
    var x = $(this).val();
});

I hope this helps!

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You need to bind the .change() event with radio button. Then you can use :checked Selector to find the selected radio option.

Example

$(document).ready(function () {
    $(':radio[name="Report_Name_option"]').change(function () {
        alert($(':radio[name="Report_Name_option"]:checked').val())
    })
});

DEMO

Upvotes: 1

Related Questions