Why isn't my checkbox change event triggered?

Question

I have two functions.

The first function translates a div click into a checked/unchecked toggle. The second function translates a checkbox change into a hide/show event.

The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.

<script type="text/javascript"> $(document).ready(function() {     $(":checkbox").parent().click(function(evt) {         if (evt.target.type !== 'checkbox') {             var $checkbox = $(":checkbox", this);             $checkbox.attr('checked', !$checkbox.attr('checked'));             evt.stopPropagation();             return false;         }     }); }); </script>  <script type="text/javascript"> $(document).ready(function() {     $(":checkbox").change(function() {         if($(this).attr("checked")) {             $('.'+this.id).show();         }         else {             $('.'+this.id).hide();         }     }); }); </script> 

Answer 1

The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:

 $(":checkbox").parent().click(function(evt) {     if (evt.target.type !== 'checkbox') {         var $checkbox = $(":checkbox", this);         $checkbox.attr('checked', !$checkbox.attr('checked'));         $checkbox.change();     } }); 

Answer 2

Don't bother with the first snippet. Just use LABEL elements:

<label><input type="checkbox">Some option</label> 

Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.

---

The second snippet can be optimized:

$('input:checkbox').change(function() {     $('#' + this.id).toggle(this.checked); });