How to Check a Radio Button with jQuery

In this tutorial, we will show the right way to check a radio button using jQuery.

Assume you have the following code:

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

<form>
  <div id='type'>
    <input type='radio' id='radio1' name='type' value='1' />
    <input type='radio' id='radio2' name='type' value='2' />
    <input type='radio' id='radio3' name='type' value='3' /> 
  </div>
</form>

Now, let’s how you can check using jQuery.

For versions of jQuery equal or above 1.6, you can use:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <input type='radio' id='radio1' name='type' value='1'>Value1 </input>
    <input type='radio' id='radio2' name='type' value='2'>Value2 </input>
    <input type='radio' id='radio3' name='type' value='3'> Value3 </input>
    <script>
      $(document).ready(function() {
          $("#radio1").prop("checked", true);
        });
    </script>
  </body>
</html>

For versions prior to 1.6, you can use:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://code.jquery.com/jquery-1.5.min.js"></script>
  </head>
  <body>
    <input type='radio' id='radio1' name='type' value='1'>Value1 </input>
    <input type='radio' id='radio2' name='type' value='2'>Value2 </input>
    <input type='radio' id='radio3' name='type' value='3'> Value3 </input>
    <script>
      $(document).ready(function() {
          $("#radio3").attr('checked', 'checked');
        });
    </script>
  </body>
</html>

You can also add .change() to the end to trigger any other event on the page.

To update the other radio buttons in the group, you can use:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <input type='radio' id='radio1' name='type' value='1'>Value1 </input>
    <input type='radio' id='radio2' name='type' value='2'>Value2 </input>
    <input type='radio' id='radio3' name='type' value='3'> Value3 </input>
    <script>
      $(document).ready(function() {
          $("#radio2").prop("checked", true).trigger("click");
        });
    </script>
  </body>
</html>

The <input> and <form> Tags

The <form> tag adds HTML forms to the web page for user input. Forms pass the data submitted by the user to the server. The <input> element is used within the <form> tag specifying fields for user input. The type of the field is determined by the value of the type attribute. One of the input types is the radio, which creates a radio button. When one radio button is chosen, all others will be disabled. Radio buttons are presented in radio groups, which is a collection of radio buttons describing a collection of related options.