How to change radio button state programmatically in jQuery ?

Last Updated : 25 Jul, 2021

In this article, we will change the selected option of the radio button using jQuery. To select the value of the radio button we can set the "checked" to set to the desired option. For setting the property, we can use the prop() method in jQuery.

Syntax:

$(selector).prop("checked", true);

Note: Selector, is the desired radio option element to be selected.

Example: Let us create a radio button group to select a favorite cricket player. We have created a radio option. By default, "Sachin" will be selected. When we click the button, the "Dhoni" option will be selected as given in the program.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
  </head>
  <body>
    <fieldset>
      <legend>Who is Your Favorite Cricketer?</legend>
      <input type="radio" 
             name="favorite" 
             value="Dhoni" />Dhoni<br />
      <input type="radio" 
             name="favorite" 
             value="Shewag" />Shewag<br />
      <input type="radio" 
             name="favorite" checked 
             value="Sachin" />Sachin<br />
      <br />
      <button id="selectID">Select option</button>
    </fieldset>

    <script>
      $("#selectID").on("click", function () {
        selectRadio();
      });
      function selectRadio() {
        let radioOption = jQuery("input:radio[value=Dhoni]");

        // This will select the radio button
        radioOption.prop("checked", true);
      }
    </script>
  </body>
</html>

Output:

How to know which radio button is selected using jQuery?

jagathish saravanan

Improve

Article Tags :

How to change radio button state programmatically in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?