How can I know which radio button is selected via jQuery?

Question

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery?

I can get all of them like this:

$("form :radio")

How do I know which one is selected?

user_56018 · Answer

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});



  
    Choose radioName
     1 

     2 

     3

user_245030 · Answer

Use this..

$("#myform input[type='radio']:checked").val();

user_560114 · Answer

If you already have a reference to a radio button group, for example:

var myRadio = $("input[name=myRadio]");

Use the filter() function, not find(). (find() is for locating child/descendant elements, whereas filter() searches top-level elements in your selection.)

var checkedValue = myRadio.filter(":checked").val();

Notes: This answer was originally correcting another answer that recommended using find(), which seems to have since been changed. find() could still be useful for the situation where you already had a reference to a container element, but not to the radio buttons, e.g.:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

user_12950 · Answer

You can use the :checked selector along with the radio selector.

 $("form:radio:checked").val();

user_7801671 · Answer

try this one. it worked for me

$('input[type="radio"][name="name"]:checked').val();

user_5117127 · Answer

JQuery to get all the radio buttons in the form and the checked value.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

user_7616442 · Answer

Another way to get it:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });



   1

   2

user_860099 · Answer

Try

myForm.myOption.value

function check() {
  console.log( myForm.myOption.value );
}

user_1432047 · Answer

You need access with the :checked selector:

Check this doc:

https://api.jquery.com/checked-selector/

a example:

$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
 $('#val').text($('input[name=radioName]:checked', '#myForm').val());
});

#val {
  color: #EB0054;
  font-size: 1.5em;
}



Radio value: 

   a 

   b 

   c

user_5423108 · Answer

How about this?

Using change and get the value of radio type is checked...

$('#my-radio-form').on('change', function() {
  console.log($('[type="radio"]:checked').val());
});



  a
  b
  c
  d

user_9704900 · Answer

**Please try below example to check which radio button in selected **

user_261439 · Answer

This solution does not require jQuery.

const RADIO_NAME = "radioName";
const radios = Array.from(document.getElementsByName(RADIO_NAME));
const checkedRadio = radios.filter(e=>e.checked);

This uses jQuery:

const radios = Array.from($(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked);

jQuery adds an extra layer of abstraction that isn't needed here.

You could also use:

const radios = Array.from(document.querySelectorAll(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked)[0];

But getElementsByName is simple and clear enough.

user_6128516 · Answer

jQuery plugin for setting and getting radio-button values. It also respects the "change" event on them.

 
    
      
        Plot single
        Plot all

or another way

user_2824395 · Answer

Along with the CSS selector :checked, you can also use the prop function (as of jQuery 1.6). I can't remember what project I was working on where simply using $('#something').is(':checked') only worked sometimes, and I resorted to also using $('#something').prop('checked') worked when it failed, but it led me to using both.

In my code snippet below, I've written two helper functions, is_checked and get_group_value. The function is_checked returns a boolean true/false value; true if the input passed in the parameter is checked (also checks with the prop() function) or false if it's not checked. The function get_group_value takes the name of the radio inputs and returns the value of the one that is checked, or an empty string if none are checked. These helper functions will also work with checkboxes, not just radio buttons.

Since the question did not define when they're retrieving the value(s), I've written a few listeners for four (3) different scenarios: when interacting with any radio button, when submitting the form, and when clicking one of these hard-coded buttons to do a one-time retrieval of the value of the group.

Please note that I'm using "click" to identify when the user interacts with the radio input element because "change" will never get triggered since the "value" attribute doesn't get changed when it's checked or not. I use this for checkboxes as well as radio buttons.

function is_checked(input) {
  var $input = $(input);
  return $input.is(':checked') || $input.prop('checked'); //Returns a boolean value. True if checked, false if not.
}
function get_group_value(group_name) {
  var $inputs = $('[name="' + group_name + '"]:checked');
  if ($inputs.length) { return $inputs.first().val(); } //If it exists, return the value of the first one found
  return ''; //If it doesn't exist, return nothing
}
$('form').on('submit', function(e) {
  e.preventDefault();
  var $form = $(this), results = {};
  $form.find('input[type=radio]').each(function() {
    var $input = $(this);
    if (is_checked(this)) {
      results[$input.attr('name')] = $input.val();
    }
  });
  console.info('Form Results', results);
});
$('form input[type=radio]').on('click', function(e) {
  var group_name = $(this).attr('name');
  console.info('Radio Button Click', group_name, get_group_value(group_name));
});
$('button.radio-button').on('click', function(e) {
  var group_name = $(this).attr('id');
  console.info('Button Click', group_name, get_group_value(group_name));
});

.my-test {
  background: #ffffff;
  color: #000000;
  padding: 16px;
}

form {
  padding: 8px;
  border: 1px solid #999999;
}

fieldset {
  border: none;
}



  
    Group 1
    
      Foo
      Bar
    
    Group 2
    
      Banana
      Apple
    
    
  
  Press this button to just get the value of the first group: 
  Press this button to just get the value of the second group:

user_9585130 · Answer

Using $('input[name="radioName"]').filter(":checked").val(); is the best way for me.

Tested, this works

Form


   Option1
   Option2
   Option3

Jquery

$(document).ready(function() {
  $('input[name="radioName"]').on('change', function() {
     const val = $(this).filter(":checked").val();
     alert(val);
  })

  // First load check
  const val = $('input[name="radioName"]').filter(":checked").val();
  alert(val);
});

Example here: https://codepen.io/abinhho/pen/mdLrqbX

user_6128573 · Answer

You can call Function onChange()

How can I know which radio button is selected via jQuery?

40 Answers

Check this doc: