Open In App

How to know which radio button is selected using jQuery?

Last Updated : 03 Aug, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

To check which radio button is selected in a form, we first get the desired input group with the type of input as an option and then the value of this selection can then be accessed by the val() method. This returns the name of the option that is currently selected.

The selector ‘input[name=option]:checked’ is used to select all input groups that have the option type of input in the specified form.

Syntax:

$('input[name=option]:checked', 'formName').val()

This is shown in the example below.
Example:




<!DOCTYPE html>
<html>
<head>
    <title>
      How to know which radio button
      is selected via jQuery?
  </title>
</head>
  
<body>
    <h1 style="color: green">
      GeeksForGeeks
  </h1>
    <b>
      How to know which radio 
      button is selected via jQuery?
  </b>
    <p>
        <form id="myForm">
            <label>
                <input 
                       type="radio"
                       name="option" 
                       value="free">
              Free Membership
            </label>
            <label>
                <input type="radio" 
                       name="option" 
                       value="premium">
              Premium Membership
            </label>
        </form>
    
    
    <p>
      The value of the option selected is: 
      <span class="output"></span>
  </p>
    <button id="btn">
      Check option button
  </button>
    
    <script src=
  </script>
    
    <script type="text/javascript">
        
      // Check the radio button value.
        $('#btn').on('click', function() {
            output = 
              $('input[name=option]:checked',
                '#myForm').val();
            
            document.querySelector(
              '.output').textContent = output;
        });
    </script>
</body>
  
</html>


Output:

Check after clicking on the first option:
check-free

Check after clicking on the second option:
check-premium

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads