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:

Javascript html checkbox

<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 <kbd class="highlighted">prop()</kbd> method is recommended:

Javascript jQuery prop() method checkbox is checked

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

Example:

Javascript jQuery prop() method checkbox is checked

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

Try it Yourself »

The second is the <kbd class="highlighted">is()</kbd> method, which makes code more readable (e.g. in if statements):

Javascript jQuery is() method checkbox is checked

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

Example:

Javascript jQuery is() method checkbox is checked

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

Try it Yourself »

The third one uses the <kbd class="highlighted">length()</kbd> and <kbd class="highlighted">size()</kbd> methods:

Javascript jQuery length() method checkbox is checked

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

Example:

Javascript jQuery length() method checkbox is checked

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

Try it Yourself »

The fourth method is to get DOM object reference:

Javascript jQuery get() method checkbox is checked

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

Example:

Javascript jQuery get() method checkbox is checked

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

Try it Yourself »

Example:

Javascript jQuery get method checkbox is checked

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

Try it Yourself »

Versions under 1.6

In the cases of versions up to 1.5, you should use <kbd class="highlighted">.attr()</kbd> method instead of <kbd class="highlighted">prop()</kbd>:

Javascript jQuery attr() method checkbox is checked

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

Example:

Javascript jQuery attr() method checkbox is checked

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

Try it Yourself »

Info

The three other methods used for version 1.6 can also be used for versions under 1.6.

Attributes vs Properties

The <kbd class="highlighted">prop()</kbd> method provides a way to get property values for jQuery 1.6 versions, while the <kbd class="highlighted">attr()</kbd> 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.