January 15, 2016

How to Uncheck a Radio Button Using JavaScript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to uncheck a radio button using javascript. Radio buttons are used to provide multiple choices to a user. In one group of radio buttons, a user can select only one.

If there is only one correct answer to a certain question, then radio buttons should be used. You must have experienced such a scenario in an exam where an objective question have one correct answer but you were provided with multiple choices.

Generally, radio buttons are left unchecked on the initial page load, but only in certain situations where the answer is predetermined, a radio button can be left checked.

In HTML, a radio button is created using an input element. Since it is a radio button, we have access to the checked property. This property returns a Boolean value depending upon the status of the radio button. Also, it can be used to check or uncheck the radio button.

In the following example, we are going to uncheck a radio button dynamically upon button click. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, label, and button). The div element with a class of container is just a wrapper for the rest of the elements.
The innerText for the button element is “Uncheck Radio”.
The input element is of type radio and it has a label of “I like Python”. It is checked by default and we are going to uncheck it with the help of javascript.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <div class="container">
    <button>Uncheck Radio</button>
    <div>
      <input type="radio" id="python" value="python" checked>
      <label for="python">I like Python</label>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

.container {
    width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

button, input  {
  padding: 5px 10px;
  margin-bottom: 20px;
}

Javascript

We have selected the input element and the button element using the document.querySelector() method and stored them in radioBtn and btn variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are using the checked property of the input element and setting it to false. This will change the status of radio button from checked to unchecked.

let radioBtn = document.querySelector("#python");
let btn = document.querySelector("button");

btn.addEventListener("click", () => {
  radioBtn.checked = false
});

You May Also Like: