jQuery - Checkbox checked state changed event

In this tutorial, let's see how to run a function when the checked/unchecked events of a checkboxes are changed?
Submitted by Pratishtha Saxena, on September 06, 2022

prerequisite: Adding jQuery to Your Web Pages

Sometimes, it is necessary to find out whether a checkbox is checked or not. Depending on this, some other tasks can be listed. So, for this, first, we need to figure out how to find whether the checkbox is checked or not.

We'll be using .on('change') method of jQuery to find out when the events are changed (checked or unchecked). The function attached to it will get fired when the checkbox events are changed.

Syntax:

$('selector').on('change',function(){});

Further, we need to return whether the checkbox gets checked or unchecked. For this, we'll use .checked property, which will return 'true' or 'false' accordingly. Once specified whether the current checkbox has been checked or not, then the task can be performed respectively.

Syntax:

('selector').checked;

This was one way of checking the event of the checkbox and performing the task according to it. There can be different ways other than this. It can also be achieved by using :checked selector. Also, .prop() method of jQuery can be used for the same and many other ways.

Let's see the following example for the same. When the given checkboxes are checked then the jQuery event returns 'Checked' as a result and similarly when any of the checked checkboxes are unchecked, then it returns 'Unchecked'.

Example to demonstrate the checkbox checked state changed event

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Checkboxes Checked State Change Events</h2>
    <p>When any below Checkboxes are Checked/Unchecked, it returns the same.</p>
    <input type="checkbox" class="myCheckboxes">Monday<br>
    <input type="checkbox" class="myCheckboxes">Tuesday<br>
    <input type="checkbox" class="myCheckboxes">Wednesday<br>
    <input type="checkbox" class="myCheckboxes">Thursday<br>
    <input type="checkbox" class="myCheckboxes">Friday<br>
    <input type="checkbox" class="myCheckboxes">Saturday<br>
    <input type="checkbox" class="myCheckboxes">Sunday<br><br><br>
    <h3 id="myH"></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('.myCheckboxes').on('change',function(){
            if(this.checked){
                $('#myH').html('Checked');
            }
            else{
                $('#myH').html('Unchecked');
            };
        });
    });
  </script>
</html>

Output:

Example: Checkbox checked state changed event