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:

Javascript to check and uncheck checkbox

<!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 checkbox = document.getElementById('checkId');
        checkbox.checked = true;
      }
      //create uncheck function 
      function uncheck() {
        let checkbox = document.getElementById('checkId');
        checkbox.checked = false;
      }
    </script>
  </body>
</html>

Try it Yourself »

jQuery

jQuery provides the <kbd class="highlighted">attr( )</kbd> and <kbd class="highlighted">prop()</kbd> methods to accomplish the task. The choice depends on the jQuery versions. Let's see examples with each of them.

attr()

The jQuery <kbd class="highlighted">attr( )</kbd> method can be used to check and uncheck a checkbox. Note that this approach is primarily for legacy jQuery versions (below 1.6); modern jQuery strongly recommends <kbd class="highlighted">prop()</kbd> for boolean attributes like checked.

Javascript jQuery attr method for the checkbox

<!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>

Try it Yourself »

prop()

You can use the <kbd class="highlighted">prop()</kbd> method to check or uncheck a checkbox, such as on click of a button. The method requires jQuery 1.6+.

Javascript jQuery prop method for the checkbox

<!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>

Try it Yourself »

Attributes vs Properties

In jQuery 1.6+, the <kbd class="highlighted">prop()</kbd> method is used to retrieve property values, while the <kbd class="highlighted">attr()</kbd> method retrieves HTML attributes. The checked state is a boolean property. While the checked attribute indicates the initial state of the checkbox, the checked property reflects its current state. It is important to remember that the attribute and property are distinct: the attribute value remains static and does not change when the user clicks the checkbox, whereas the property updates dynamically.