Open In App
Related Articles

How to know which radio button is selected using jQuery?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
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.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads