How to use radio on change event using jQuery?

Let's discuss how to change the events when different radio buttons are selected using jQuery?
Submitted by Pratishtha Saxena, on November 17, 2022

Radio buttons are used when one option has to be selected among all. Hence, fields like gender use radio buttons in a form. Radio buttons are created using an input tag, specifying the type as radio.

Different events can be set according to the option selected by the user. For achieving this task, we will use the – change() method in jQuery.

The change() method is a built-in jQuery method. It helps to detect the change in the text of the input element or the text area. In other words, we can say that the change event gets triggered whenever the input text is changed by the user. Some kind of function can be attached to perform other tasks. This method generally works for the form fields, input, <textarea> etc.

Syntax:

$('selector').change();
$('selector').change(function);

It takes one optional parameter – function. The function is the custom function that can be defined to do some tasks when this method gets triggered.

jQuery code to use radio on change event

Example 1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>How to use radio on change event?</h2>
    <p>Change the Radio button Selected and see the results accordingly.</p>
    <hr>
    <br>
    <b>Gender :</b> 
    <input type="radio" value="Female" name="gender">Female
    <input type="radio" value="Male" name="gender">Male
    <input type="radio" value="Other" name="gender">Other 
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('input[type=radio]').change(function(){
            $('h3').html($(this).val() + ' Selected');
        });
    });
  </script>
</html>

Output:

Also, change can be used along with the on() method to achieve this. The event handler can be defined over the selection of the radio buttons using the on() method and change as its event.

Let's have a look at this method.

Example 2:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>How to use radio on change event?</h2>
    <p>Change the Radio button Selected and see the results accordingly.</p>
    <hr>
    <br>
    <b>Gender :</b> 
    <input type="radio" value="Female" name="gender">Female
    <input type="radio" value="Male" name="gender">Male
    <input type="radio" value="Other" name="gender">Other 
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('input[type=radio]').on('change',function(){
            $('h3').html($(this).val() + ' Selected');
        });
    });
  </script>
</html>

Output: