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?

javascript jquery html jquery-selectors radio-button 

Nov 17

4 Answers

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()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

answered Jan 29


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();

answered Jan 29


The jQuery: checked selector can be used in conjugation with the val() to find the value of certain radio button as,

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

In your query this can be implemented as −

Example

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $("input[type='button']").click(function() {
            var radioValue = $("input[name='q1']:checked").val();
            if(radioValue) {
               alert("You select - " + radioValue);
            }
         });
      });
   </script>
</head>
<body>
   <form action="">
   Select a number:<br>
      <input type="radio" name="q1" value="1">1
      <input type="radio" name="q1" value="2">2
      <input type="radio" name="q1" value="3">3
   </form>
<p><input type="button" value="submit"></p>
</body>
</html>

answered Jan 29


Use the jQuery :checked selector

You can simply use the jQuery :checked selector in combination with the val() method to find the value of the selected radio button inside a group.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Radio Button Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
    });
</script>
</head> 
<body>
    <h4>Please select your gender.</h4>
    <p> 
        <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label>
    </p>
    <p><input type="button" value="Get Value"></p>
</body>
</html>

answered Jan 29


Login and Submit Your Answer
Browse other questions tagged  javascript  jquery  html  jquery-selectors  radio-button or ask your own question.