Checkbox change event Example using jQuery

Here in this article, I’ll show you how to capture on change event of a checkbox using jQuery and call a function when a checkbox changes is status from checked to un-checked and vice versa.

A change event occurs when the value of an element changes. To capture change event of an element, like a checkbox, we can use the .change() method in jQuery.

jQuery .change() method Syntax

$(selector).change(function)

Now, let us see an example.

Using .change() Method to Capture change event of Checkbox

I just have a checkbox in my web page. When I click the checkbox, it calls a function. Clicking on the checkbox changes its status (from checked to un-checked and vice versa) and hence the change event occurs. You can apply this method on multiple checkboxes in your web page.

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div>
    <input type='checkbox' value='javascript' id='chkjs' /> JavaScript
  </div>
</body>

<script>
    $(document).ready(function () {
        $('#chkjs').change(function () {
            if (this.checked)
                checkDetails(this);
        });
    });

    function checkDetails(ele) {
        console.log('Value: ' + ele.value + ' ID: ' + ele.id);
    }
</script>
</html>

Try it

See carefully, I have attached the .change() method to the checkbox element using its id as selector.

$('#chkjs').change(function () { }

It will capture the change event of this particular element only. Now, how do we do this when we have multiple checkboxes?

Capture change event of multiple checkboxes in jQuery

Here’s another example where I have multiple checkboxes and each, when checked or un-checked (on change), will call a different function. Attaching checkbox ids to the .change() method is not ideal in this situation. The code becomes length and can be difficult to manage.

So, instead of element's id we can use a class name as selector to the .change() method.

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div>
    <!--checkbox 1-->
    <input type='checkbox' value='js' id='chk1' class='chk' /> JavaScript

    <p id='js'>
      JavaScript is a lightweight programming language for the web <br />
      <a href='../../category/javascript/' target='_blank'>
      	JavaScript Tutorials
      </a>
    </p>
  </div>

  <div>
    <!--checkbox 2-->
    <input type='checkbox' value='ang' id='chk2'  class='chk' /> Angular

    <p id='ang'>
      Build mobile and desktop web applications using 
      <a href='../../category/angularjs/' target='_blank'>
      	Angular
      </a>
    </p>  
  </div>
  
  <div>
    <!--checkbox 3-->
    <input type='checkbox' value='jquery' id='chk3' class='chk' /> jQuery

    <p id='jquery'>
      jQuery is a cross browser library of pre-written JavaScript to simplify 
      client side scripting of web applications.
      <a href='../../category/jquery/' target='_blank'>
      	jQuery Examples
      </a>
    </p>
  </div>
</body>

<script>
    $(document).ready(function () {
        $('.chk').change(function () {
            if (this.checked)
                showDetail(this.value);
            else
                just_hide(this.value);
        });
    });

    function showDetail(ele) {
        $('#' + ele).show('slow');
    }

    function just_hide(ele) {
        $('#' + ele).hide();
    }
</script>
</html>

Try it

The .change() method now listens to all the checkboxes because the selector I have defined is a class name, which assigned to all the checkboxes in the web form.

When the change event occurs, it calls a function, according to the checkbox status (checked or un-checked). The function animatedly shows and hides the <div> elements.

← PreviousNext →