How to select a radio button by default in JavaScript?

Javascript Web Development Front End Technology

Radio button

A radio button is used to select one among many options. This is one of the element in HTML. This radio button is a radio group to show a set of multiple choices, and in that only one can be selected. This way far similar to checkboxes, in checkboxes scenario’s we can select either one or many options as we can, whereas in radio button it can’t be done selecting multiple choices. We can define radio button is HTML using <input> tag.

Following is the syntax to define radio buttons in HTML

<input type="radio">

Example 1

None selected by default

In case we need to select a radio button by default, we need to check it as true. Whenever the radio buttons are checked as true, then it will be autofocused by default.

Considering the below example, we have three radio buttons and none of them are autofocused. After executing the script below, we get none selected as default because none of them are autofocused


<!DOCTYPE html>
<html>
<body>
   <input id="radio_1" value="1" type="radio" name="check"/>Male
   <input id="radio_2" value="2" type="radio" name="check"/>Female
   <input id="radio_3" value="3" type="radio" name="check"/>Not to mention
</body>
</html>

Example 2

Selecting a button

In this example, we'll choose the button and mark it as true, which will allow us to make that button the default.


<!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" />
   <title>Select a radio button by default</title>
   <input id="radioButton1" type="radio" name="check" />Hyderabad
   <input id="radioButton2" type="radio" name="check" />Delhi
   <input id="radioButton3" type="radio" name="check" />Mumbai
</head>
<body>
   <script>
      let radBtnDefault = document.getElementById("radioButton1");
      radBtnDefault.checked = true;
   </script>
</body>
</html>

Example 3

In the below example, we have three radio buttons. At the initial stage we need to check the radio buttons to autofocus.

To perform that we need to get the id of the particular radio button which we want to assign the autofocus and we need to check it as true. After executing the script below, it will come with output as selecting the Minor radio button as default because we checked that button as true.


<!DOCTYPE html>
<html>
<body>
   <form id="radio_btn_form" name="form">
      <input id="radio_1" value="1" type="radio" name="check"/>Minor
      <input id="radio_2" value="2" type="radio" name="check"/>Major
      <input id="radio_3" value="3" type="radio" name="check"/>senior citizen
   </form>
   <script>
      radiobutton = document.getElementById("radio_1");
      radiobutton.checked = true;
   </script>
</body>
</html>

Example 4

Using the “default checked” property

The following example, It says that whether the radio button is clicked default or not. This can be done using ".defaultChecked" assigning to .getElementById. And the output will be shown in a Boolean value.


<!DOCTYPE html>
<html>
<body>
   <input type="radio" name="name" id="myRadio_1" checked> Radio Button-1
   <p>Click on "Tap to check" button below know whether the radio button is by default checked.</p>
   <button onclick="func()">Tap to check!</button>
   <p id="para"></p>
   <script>
      function func() {
         var a = document.getElementById("myRadio_1").defaultChecked;
         document.getElementById("para").innerHTML = a;
      }
   </script>
</body>
</html>