Skip to content
Related Articles

Related Articles

How to know which radio button is selected using jQuery?
  • Last Updated : 23 Apr, 2019

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :