How to Uncheck a Radio Button

To uncheck a radio button, you can either use jQuery script or JavaScript. Unlike checkboxes, HTML radio buttons are mutually exclusive and cannot be natively unchecked by default, so JavaScript is required to override this behavior. Let's see how each of them works.

jQuery

If you want to use jQuery, then the right choice of unchecking radio button dynamically (such as on click of a button) will be using the <kbd class="highlighted">prop()</kbd> method.

Let's see how it works:

JavaScript jQuery unchecked radio buttons

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js">
    </script>
  </head>
  <body>
    <div>
      <label>
        <input type="radio" name="check button" id="radiobtn1" /> Radio Button 1</label>
      <label>
        <input type="radio" name="check button" id="radiobtn2" /> Radio Button 2</label>
    </div>
    <div>
      <button type="button" class="checkRadioBtn1">Uncheck Radio Button 1</button>
      <button type="button" class="checkRadioBtn2">Uncheck Radio Button 2</button>
    </div>
    <script>
      $(document).ready(function() {
          $(".checkRadioBtn1").click(function() {
              $("#radiobtn1").prop("checked", false);
            });
          $(".checkRadioBtn2").click(function() {
              $("#radiobtn2").prop("checked", false);
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

JavaScript

Here is a JavaScript solution to unchecking a radio button:

JavaScript unchecked radio buttons

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="radio" name="test" value="1" />
    <input type="radio" name="test" value="2" checked="checked" />
    <input type="radio" name="test" value="3" />
    <script>
      let radios = document.getElementsByTagName('input');
      for(let i = 0; i < radios.length; i++) {
        radios[i].onclick = function(e) {
          if(e.ctrlKey) {
            this.checked = false;
          }
        }
      }
    </script>
  </body>
</html>

Try it Yourself »

Note: Standard radio buttons cannot be unchecked once selected. This example uses the e.ctrlKey property to allow unchecking only when the Ctrl key is held down during the click.

The prop() Method

Danger

The <kbd class="highlighted">prop()</kbd> method is used to check or uncheck a radio button, such as on click of a button. The method requires jQuery 1.6+ versions. The <kbd class="highlighted">prop()</kbd> method has an advantage over the <kbd class="highlighted">.attr()</kbd> method when setting disabled and checked. The method manipulates the checked property and sets it to true or false based on whether you want to check or uncheck it.