How to Check and Uncheck Checkbox with JavaScript and jQuery

For checking and unchecking a checkbox, you can either use JavaScript or jQuery methods described below.

JavaScript

Use the following code to check and uncheck checkbox using JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <p><input type="checkbox" id="checkId"> Are you sure?</p>
      <button type="button" class="check" onclick="check()">Yes</button>
      <button type="button" class="uncheck" onclick="uncheck()">No</button>
    </form>
    <script>
      //create check function 
      function check() {
        let inputs = document.getElementById('checkId');
        inputs.checked = true;
      }
      //create uncheck function 
      function uncheck() {
        let inputs = document.getElementById('checkId');
        inputs.checked = false;
      }
      window.onload = function() {
        window.addEventListener('load', check, false);
      }
    </script>
  </body>
</html>

jQuery

jQuery provides the attr( ) and prop() methods to accomplish the task. The choice depends on the jQuery versions. Let's see examples with each of them.

attr()

The jQuery attr( ) method can be used to check and uncheck the checkbox for jQuery versions below 1.5:

<!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>
    <p><input type="checkbox" id="checkId"> Are you sure?</p>
    <button type="button" class="check">Yes</button>
    <button type="button" class="uncheck">No</button>
    <script>
      $(document).ready(function() {
          $(".check").click(function() {
              $("#checkId").attr("checked", true);
            });
          $(".uncheck").click(function() {
              $("#checkId").attr("checked", false);
            });
        });
    </script>
  </body>
</html>

prop()

You can use the prop() method to check or uncheck a checkbox, such as on click of a button. The method requires jQuery 1.6+.

<!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>
    <p><input type="checkbox" id="checkId"> Are you sure?</p>
    <button type="button" class="check">Yes</button>
    <button type="button" class="uncheck">No</button>
    <script>
      $(document).ready(function() {
          $(".check").click(function() {
              $("#checkId").prop("checked", true);
            });
          $(".uncheck").click(function() {
              $("#checkId").prop("checked", false);
            });
        });
    </script>
  </body>
</html>

Attributes vs Properties

In case of jQuery 1.6 versions, the prop() method provides a way to retrieve property values, while the attr() method retrieves attributes. The checked is a boolean attribute, which means that the corresponding property is true if the attribute is present, even if the attribute has no value or is set to empty string value or "false". It is important to remember that the checked attribute does not correspond to the checked property. The checked attribute value doesn't change with the state of the checkbox, whereas the checked property changes.