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

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

juan
1#
juan Published in 2009-02-27 19:53:27Z
 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? Peter J 2# Peter J Reply to 2017-10-27 15:46:55Z  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()); }); 
1
2
3

tvanfosson
3#
tvanfosson Reply to 2012-04-24 15:57:22Z
 You can use the :checked selector along with the radio selector.  $("form:radio:checked").val();  Joberror 4# Joberror Reply to 2010-01-07 00:45:35Z  Use this.. $("#myform input[type='radio']:checked").val(); 
5#
 In a JSF generated radio button (using  tag), you can do this: radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();  where selectOneRadio ID is radiobutton_id and form ID is form_id. Be sure to use name instead id, as indicated, because jQuery uses this attribute (name is generated automatically by JSF resembling control ID).
Code Maverick
6#
Code Maverick Reply to 2012-04-24 16:00:37Z
 $("input:radio:checked").val();  Sanjaysinh Zala 7# Sanjaysinh Zala Reply to 2017-10-27 07:40:19Z  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();  Cam Tullos 8# Cam Tullos Reply to 2011-03-30 22:29:39Z  This should work: $("input[name='radioName']:checked").val()  Note the "" usaged around the input:checked and not '' like the Peter J's solution
Alex V
9#
Alex V Reply to 2015-04-17 17:47:24Z
 Get all radios: var radios = jQuery("input[type='radio']");  Filter to get the one thats checked radios.filter(":checked") 
RedDragon
10#
RedDragon Reply to 2011-09-21 19:35:22Z
 Another option is: $('input[name=radioName]:radio:checked').val()  epascarello 11# epascarello Reply to 2011-11-15 17:16:12Z  Also, check if the user does not select anything. var radioanswer = 'none'; if ($('input[name=myRadio]:checked').val() != null) { radioanswer = $('input[name=myRadio]:checked').val(); }  swiftBoy 12# swiftBoy Reply to 2012-06-07 11:56:12Z  If you have Multiple radio buttons in single form then var myRadio1 =$('input[name=radioButtonName1]'); var value1 = myRadio1.filter(':checked').val(); var myRadio2 = $('input[name=radioButtonName2]'); var value2 = myRadio2.filter(':checked').val();  This is working for me. Tisho 13# Tisho Reply to 2012-07-17 12:09:01Z  $(".Stat").click(function () { var rdbVal1 = $("input[name$=S]:checked").val(); } 
Olivier Pons
14#
Olivier Pons Reply to 2017-12-27 08:06:34Z
 In my case I have two radio buttons in one form and I wanted to know the status of each button. This below worked for me: // get radio buttons value console.log( "radio1: " + $('input[id=radio1]:checked', '#toggle-form').val() ); console.log( "radio2: " +$('input[id=radio2]:checked', '#toggle-form').val() );  

Darin Peterson
15#
Darin Peterson Reply to 2012-09-21 16:19:38Z
 Here's how I would write the form and handle the getting of the checked radio. Using a form called myForm: 
...  Get the value from the form: $('#myForm .radio1:checked').val();  If you're not posting the form, I would simplify it further by using:   Then getting the checked value becomes: $('.radio1:checked').val();  Having a class name on the input allows me to easily style the inputs...
Rodrigo Dias
16#
Rodrigo Dias Reply to 2013-01-11 18:05:37Z
 To get the value of the selected radio that uses a class: $('.class:checked').val()  JGrinon 17# JGrinon Reply to 2014-01-26 10:58:23Z  I wrote a jQuery plugin for setting and getting radio-button values. It also respects the "change" event on them. (function ($) { function changeRadioButton(element, value) { var name = $(element).attr("name");$("[type=radio][name=" + name + "]:checked").removeAttr("checked"); $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");$("[type=radio][name=" + name + "]:checked").change(); } function getRadioButton(element) { var name = $(element).attr("name"); return$("[type=radio][name=" + name + "]:checked").attr("value"); } var originalVal = $.fn.val;$.fn.val = function(value) { //is it a radio button? treat it differently. if($(this).is("[type=radio]")) { if (typeof value != 'undefined') { //setter changeRadioButton(this, value); return$(this); } else { //getter return getRadioButton(this); } } else { //it wasn't a radio button - let's call the default val function. if (typeof value != 'undefined') { return originalVal.call(this, value); } else { return originalVal.call(this); } } }; })(jQuery);  Put the code anywhere to enable the addin. Then enjoy! It just overrides the default val function without breaking anything. You can visit this jsFiddle to try it in action, and see how it works. Fiddle
atiquratik
18#
atiquratik Reply to 2015-01-20 05:51:10Z
 Use this: value = $('input[name=button-name]:checked').val();  Randy Greencorn 19# Randy Greencorn Reply to 2013-08-12 02:13:15Z  If you only have 1 set of radio buttons on 1 form, the jQuery code is as simple as this: $( "input:checked" ).val() 
Juan
20#
Juan Reply to 2013-08-30 20:27:20Z
 If you want just the boolean value, i.e. if it's checked or not try this: $("#Myradio").is(":checked")  Milap 21# Milap Reply to 2016-06-29 12:00:39Z  To retrieve all radio buttons values in JavaScript array use following jQuery code : var values = jQuery('input:checkbox:checked.group1').map(function () { return this.value; }).get();  Milap 22# Milap Reply to 2016-06-29 12:00:17Z  I've released a library to help with this. Pulls all possible input values, actually, but also includes which radio button was checked. You can check it out at https://github.com/mazondo/formalizedata It'll give you a js object of the answers, so a form like:  Blue Red  will give you: $("form").formalizeData() { "favorite-color" : "blue" } 
Lafif Astahdziq
23#
Lafif Astahdziq Reply to 2014-10-19 17:34:09Z
 I use this simple script $('input[name="myRadio"]').on('change', function() { var radioValue =$('input[name="myRadio"]:checked').val(); alert(radioValue); }); 
Manoj
24#
Manoj Reply to 2015-02-14 11:41:37Z
 This works fine $('input[type="radio"][class="className"]:checked').val()  Working Demo The :checked selector works for checkboxes, radio buttons, and select elements. For select elements only, use the :selected selector. API for :checked Selector Community 25# Community Reply to 2017-05-23 12:02:54Z  From this question, I came up with an alternate way to access the currently selected input when you're within a click event for its respective label. The reason why is because the newly selected input isn't updated until after its label's click event. TL;DR $('label').click(function() { var selected = $('#' +$(this).attr('for')).val(); ... });  $(function() { // this outright does not work properly as explained above$('#reported label').click(function() { var query = $('input[name="filter"]:checked').val(); var time = (new Date()).toString();$('.query[data-method="click event"]').html(query + ' at ' + time); }); // this works, but fails to update when same label is clicked consecutively $('#reported input[name="filter"]').on('change', function() { var query =$('input[name="filter"]:checked').val(); var time = (new Date()).toString(); $('.query[data-method="change event"]').html(query + ' at ' + time); }); // here is the solution I came up with$('#reported label').click(function() { var query = $('#' +$(this).attr('for')).val(); var time = (new Date()).toString(); $('.query[data-method="click event with this"]').html(query + ' at ' + time); }); }); input[name="filter"] { display: none; } #reported label { background-color: #ccc; padding: 5px; margin: 5px; border-radius: 5px; cursor: pointer; } .query { padding: 5px; margin: 5px; } .query:before { content: "on " attr(data-method)": "; } [data-method="click event"] { color: red; } [data-method="change event"] { color: #cc0; } [data-method="click event with this"] { color: green; }   JoshYates1980 26# JoshYates1980 Reply to 2017-05-04 21:26:41Z  $(function () { // Someone has clicked one of the radio buttons var myform= 'form.myform'; $(myform).click(function () { var radValue= "";$(this).find('input[type=radio]:checked').each(function () { radValue= $(this).val(); }); }) });  Gautam Rai 27# Gautam Rai Reply to 2017-07-10 12:21:21Z  try it- var radioVal =$("#myform").find("input[type='radio']:checked").val(); console.log(radioVal); 
Mehdi Bouzidi
28#
Mehdi Bouzidi Reply to 2017-12-27 08:26:52Z
 DEMO : https://jsfiddle.net/ipsjolly/xygr065w/  $(function(){$("#submit").click(function(){ alert($('input:radio:checked').val()); }); });  Sales Promotion 1 2 3 4 5  user1585204 29# user1585204 Reply to 2017-09-04 15:41:35Z  What I needed to do was simplify C# code, that is do as much as possible in the front end JavaScript. I'm using a fieldset container because I'm working in DNN and it has its own form. So I can't add a form. I need to test which text box out of 3 is being used and if it is, what's the type of search? Starts with the value, Contains the value, Exact Match of the value. HTML:   And my JavaScript is:  alert($('input[name=partNumber]:checked', '#fsPartNum').val()); if(txtPartNumber.val() !== ''){ message = 'Customer Part Number'; } else if(txtCommercialPartNumber.val() !== ''){ } else if(txtDescription.val() !== ''){ }  Just saying any containing tag with an ID can be used. For DNNers, this is good to know. The end goal here is pass to the mid-level code what is needed to start a parts search in SQL Server. This way I don't have to copy the much more complicated previous C# code also. The heavy lifting is being done right here. I had to look a bit for this and then tinker with it to get it to work. So for other DNNers, hopefully this is easy to find.
Mehdi Bouzidi
30#
Mehdi Bouzidi Reply to 2017-10-03 12:56:52Z
 Another way to get it:  \$("#myForm input[type=radio]").on("change",function(){ if(this.checked) { alert(this.value); } }); 
1
2 
 You need to login account before you can post.
Processed in 0.391789 second(s) , Gzip On .