Check For Checkbox Is Checked JavaScript And jQuery

In this tutorial, you will see how to check if checkbox is checked JavaScript and jQuery. We will discuss it in different ways using various examples.

The checkbox is a type of input element in HTML. It is used to check or uncheck a particular option.

Unlike the radio button that allows only one choice to be selected, the checkbox input type allows users to select multiple-choice options. It is used to select multiple options from a list.

Check Checkbox Checked Using JavaScript

Every element has few properties that let Javascript control the element in certain way. One of such property that a checkbox has is checked property.

The checked property is a boolean value that tells if the checkbox is checked or not. It can be used to tell whether the checkbox is checked or not. Example element.checked

The following code snippet shows how to check if a checkbox is checked or not.

<label for="light">Light:</label>
<input type="checkbox" name="light" id="light">

<script>
  // select the checkbox
  var light = document.getElementById('light');

  // alert the user status of the checkbox
  alert(light.checked ? 'The light is on' : 'The light is off');
</script>

In the above code snippet, the checkbox is unchecked (default) and when as web page loads the alert message will be displayed as The light is off. The checked property is set to false.

But above codes run only once when the page loads.

Check Checkbox on Click

Here we need some dynamic action where we can check if the checkbox is checked or not dynamically at any moment of time and alert the user accordingly.

To do this you need to attach an onchange event on the checkbox, which triggers when the checkbox is checked or unchecked.

<label for="light">Light:</label>
<input type="checkbox" name="light" id="light">
<p id="output"></p>

<script>
  // select the element
  var light = document.getElementById('light');
  var output = document.getElementById('output');

  // add onchange event to checkbox
  light.onchange = function() {
    if (light.checked) {
      output.innerHTML = 'The light is on';
    } else {
      output.innerHTML = 'The light is off';
    }
  };
</script>

Output:

Check Checkbox Checked Using jQuery

jQuery is a JavaScript library that makes it easy to manipulate HTML elements. Here we will use jQuery to check if a checkbox is checked or not.

To use jQuery, we need to include the jQuery library in our HTML page. Add the following code snippet in the head section of our HTML page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Using jQuery checked Property

jQuery also has a checked property that can be used to check if a checkbox is checked or not. Use propery 0th index of the jQuery object. Example $('#light')[0].checked

<label for="light">Light:</label>
<input type="checkbox" name="light" id="light">
<p id="output"></p>

<script>
  // select the element
  var light = $('#light');
  var output = $('#output');

  // add onchange event to checkbox
  light.onchange = function() {
    if (light[0].checked) {
      output.html('The light is on');
    } else {
      output.html('The light is off');
    }
  };
</script>

Here, element with id light is selected using jQuery and added an onchange event that checks whether the checkbox is checked.

Output:

Using jQuery .is(':checked')

jQuery has a .is() method which is a general method used for multiple purposes. It returns true/false based on the condition.

We can use :checked selector with it to check if a checkbox is checked or not.

Combining together we get element.is(':checked').

<label for="light">Light:</label>
<input type="checkbox" name="light" id="light">
<p id="output"></p>

<script>
  // select the element
  var light = $('#light');
  var output = $('#output');

  // add onchange event to checkbox
  $('#light').change(function () {
    if($(this).is(':checked')) {
      output.text('The light is on');
    } else {
      output.text('The light is off');
    }
  });
</script>

Output:

Using jQuery .prop()

Another method of jQuery that can perform a similar task is .prop() method. It returns the value of the property of the element.

You can use .prop('checked') to check if a checkbox is checked or not.

<label for="light">Light:</label>
<input type="checkbox" name="light" id="light">
<p id="output"></p>

<script>
  // select the element
  var light = $('#light');
  var output = $('#output');

  // add onchange event to checkbox
  $('#light').change(function () {
    if($(this).prop('checked')) {
      output.text('The light is on');
    } else {
      output.text('The light is off');
    }
  });
</script>

Output:

Conclusion

In this short guide, we've taken a look at 4 different ways to check if the checkbox is checked javascript.

Methods used in this article was: element.checked(javascript), $('element')[0].checked(jQuery), .is(':checked')(jQuery), .prop('checked')(jQuery).