How to Test If a Checkbox is Checked with jQuery

This tutorial covers several methods that will check if the checkbox is checked. All methods do the same thing, but the methods vary depending on the jQuery version you use.

Let's consider the following example and see how to test checkbox checked using different versions of jQuery:

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

<input id="checkbox"  type="checkbox" name="one" value="1" checked="checked">
<input id="checkbox2" type="checkbox" name="two" value="2">
<input id="checkbox3" type="checkbox" name="thr" value="3">

jQuery 1.6 or newer

To check the checkbox property of an element, the prop() method is recommended:

$('#checkbox').prop('checked'); // Boolean true

Example:

<!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>
    <input id="checkbox1" type="checkbox" name="one" value="1">
    <input id="checkbox2" type="checkbox" name="two" value="2">
    <input id="checkbox3" type="checkbox" name="thr" value="3">
    <script>
      $(document).ready(function() {
          $('input[type="checkbox"]').click(function() {
              if($(this).prop("checked") == true) {
                alert("Checkbox is checked.");
              }
              else if($(this).prop("checked") == false) {
                alert("Checkbox is unchecked.");
              }
            });
        });
    </script>
  </body>
</html>

The second is the is() method, which makes code more readable (e.g. in if statements):

$('#checkbox').is(':checked'); // Boolean true

Example:

<!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>
    <input id="checkbox1" type="checkbox" name="one" value="1">
    <input id="checkbox2" type="checkbox" name="two" value="2">
    <input id="checkbox3" type="checkbox" name="thr" value="3">
    <script>
      $(document).ready(function() {
          $('input[type="checkbox"]').click(function() {
              if($(this).is(":checked")) {
                alert("Checkbox is checked.");
              }
              else if($(this).is(":not(:checked)")) {
                alert("Checkbox is unchecked.");
              }
            });
        });
    </script>
  </body>
</html>

The third one uses the length() and size() methods:

$('#checkbox:checked').length; // Integer >0
$('#checkbox:checked').size(); // .size() can be used instead of .length

Example:

<!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 id="checkList">
      <input id="checkbox1" type="checkbox" name="one" value="1" />
      <input id="checkbox2" type="checkbox" name="two" value="2" />
      <input id="checkbox3" type="checkbox" name="thr" value="3" />
    </div>
    <input type="button" id="btnCheck" value="Check" />
    <script type="text/javascript">
      $(function() {
        $("#btnCheck").click(function() {
            let checked = $("#checkList input[type=checkbox]:checked")
              .length;
            if(checked > 0) {
              alert(checked + " CheckBoxe(s) are checked.");
              return true;
            } else {
              alert("Please select CheckBoxe(s).");
              return false;
            }
          });
      });
    </script>
  </body>
</html>

The fourth method is to get DOM object reference:

$('#checkbox').get(0).checked; // Boolean true
$('#checkbox')[0].checked; // Boolean true

Example:

<!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 id="checkList">
      <input id="checkbox1" type="checkbox" name="one" value="1" />
    </div>
    <input type="button" id="btnCheck" value="Check" />
    <input type="button" id="btnUnCheck" value="UnCheck" />
    <script>
      $('#btnCheck').on('click', function() {
          $('#checkbox1').get(0).checked = true;
        });
      $('#btnUnCheck').on('click', function() {
          $('#checkbox1').get(0).checked = false;
        });
    </script>
  </body>
</html>

Example:

<!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 id="checkList">
      <input id="checkbox1" type="checkbox" name="one" value="1" />
      <input id="checkbox2" type="checkbox" name="two" value="2" />
      <input id="checkbox3" type="checkbox" name="thr" value="3" />
    </div>
    <input type="button" id="btnCheck" value="Check" />
    <input type="button" id="btnUnCheck" value="UnCheck" />
    <script>
      $('#btnCheck').on('click', function() {
          $('input')[0].checked = true;
        });
      $('#btnUnCheck').on('click', function() {
          $('input')[0].checked = false;
        });
    </script>
  </body>
</html>

Versions under 1.6

In the cases of versions up to 1.5, you should use .attr() method instead of prop():

$('#checkbox').attr('checked'); // Boolean true

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox" id="checkbox" checked="checked" />
    <div id="mydiv">
      <input type="checkbox" id="Uncheckbox" />
    </div>
    <script>
      $("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");
      $("#Uncheckbox").attr("checked") ? alert("Checked") : alert("Unchecked");
    </script>
  </body>
</html>
The three other methods used for version 1.6 can also be used for versions under 1.6.

Attributes vs Properties

The prop() method provides a way to get property values for jQuery 1.6 versions, while the attr() method retrieves the values of attributes. The checked is a boolean attribute meaning 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". The checked attribute value doesn't change with the state of the checkbox, whereas the checked property changes.