How to Uncheck a Radio Button

To uncheck a radio button, you can either use jQuery script or JavaScript. Let's see how each of them works.

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

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 prop() method.

Let's see how it works:

<!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">Checked Radio Button 1</button>
      <button type="button" class="checkRadioBtn2">Checked Radio Button 2</button>
    </div>
    <script>
      $(document).ready(function() {
          $(".checkRadioBtn1").click(function() {
              $("#radiobtn1").prop("checked", true);
            });
          $(".checkRadioBtn2").click(function() {
              $("#radiobtn2").prop("checked", true);
            });
        });
    </script>
  </body>
</html>

JavaScript

Here is a JavaScript solution to unchecking a radio button:

<!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(i = 0; i < radios.length; i++) {
        radios[i].onclick = function(e) {
          if(e.ctrlKey) {
            this.checked = false;
          }
        }
      }
    </script>
  </body>
</html>

The prop() Method

The prop() method is used to check or uncheck a checkbox, such as on click of a button. The method requires jQuery 1.6+ versions. The prop() method has an advantage over the .attr() 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.