Get the value of a radio button using jquery

Question

I have this portion of code:

var checkout_options = $("#checkout").find("input[type='radio']");
    $('#button-account').on('click', function () {
            alert(checkout_options.value);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
    <p>Checkout Options:</p>
    <label for="register">
        <input type="radio" name="account" value="register" id="register" checked>
        <b>Register Account</b></label>
    <br>
    <label for="guest">
        <input type="radio" name="account" value="guest" id="guest">
        <b>Guest Checkout</b>
    </label>
  <input type="button" value="Continue" id="button-account">
</div>

What I want it is to get the value of the selected radio button but with my code I only get the first radio button value, the second radio does not work. Kindly help me fix the error.

Pranav C Balan · Accepted Answer · 2016-08-05T13:56:42.917

You need to use this to refer the element inside the callback. So get value by using this.value or $(this).val() method. Although avoid :checked pseudo-class selector otherwise it only selects the first element.

var selected = $("#checkout").find("input[type='radio']");
    selected.change(function(){
        alert(this.value);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
    <p>Checkout Options:</p>
    <label for="register">
        <input type="radio" name="account" value="register" id="register" checked>
        <b>Register Account</b></label>
    <br>
    <label for="guest">
        <input type="radio" name="account" value="guest" id="guest">
        <b>Guest Checkout</b>
    </label>
</div>

You can make it simpler using :radio pseudo-class selector

$("#checkout :radio").change(function() {
  alert(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
  <p>Checkout Options:</p>
  <label for="register">
    <input type="radio" name="account" value="register" id="register" checked>
    <b>Register Account</b>
  </label>
  <br>
  <label for="guest">
    <input type="radio" name="account" value="guest" id="guest">
    <b>Guest Checkout</b>
  </label>
</div>

Thanks for providing your help but it does not work. Try your code — Prince, Aug 05 '16 at 13:50

score 1 · Answer 2 · answered Aug 05 '16 at 13:50

Your handler is only being attached to the radio button that is checked, so no handler exists for the second radio button. Attach a handler to both radio buttons:

var $radioBtn = $( "#checkout" ).find( "input[type='radio']" );

$radioBtn.on( 'change', function() {
  if ( this.checked ) {
    alert( this.value );
  }
});

score 1 · Answer 3 · answered Aug 05 '16 at 13:51

It didn't work, because you register the event handler for the initially checked value only. This is how to make it dynamically reflect the value change:

var selected = $("#checkout").find("input[name='account']");
selected.change(function(){
    alert($(this).val());
});

This also makes sure that only the current radio button group is included, so you can have additional ones.

Jsfiddle: https://jsfiddle.net/sjmhdasw/

score 1 · Answer 4 · answered Aug 05 '16 at 13:52

Just use

$("input[type='radio']").on("change", function() { console.log(this.id + " checked !"); });

It binds an event listener on all the inputs of type radio !

No need to store the selectors inside a variable (unless you're doing something with it, somewhere else in your code)

Get the value of a radio button using jquery

4 Answers4