Question

I listen for 2 click events. First one fires when checkbox is checked:

        $('#example').on('click', '.option', function(){
        // Some logic
    });

Second one fires when it’s unchecked:

            $('#example').on('click', '.checked.option', function(){
        // Some other logic
    });

As for HTML input element, I tried applying class to it in various ways:

class="checked option"
class="checked.option"
class="option checked"
class="option.checked"

But in either case, when checkbox is unchecked – both events get triggered instead of just second one.

QUESTION: Is there a way to prevent this? Or is there a more convenient way to detect click event on a checkbox AND that it was unchecked?

Thanks.

Answer 1

You should really use the change event instead of a click and then check the button state.

 $('#example').on('change', '.option', function() {
     if( this.checked ) {
     }
     else {
     }
 });