Click toggle with jQuery

Question

I've used a hover function where you do x on mouseover and y and mouseout. I'm trying the same for click but it doesn't seem to work:

$('.offer').click(function(){    $(this).find(':checkbox').attr('checked', true );  },function(){   $(this).find(':checkbox').attr('checked', false );  }); 

I want the checkbox to be checked when clicking on a div, and unchecked if clicked again - a click toggle.

Answer 1

This is easily done by flipping the current 'checked' state of the checkbox upon each click. Examples:

 $(".offer").on("click", function () {         var $checkbox = $(this).find(':checkbox');        $checkbox.attr('checked', !$checkbox.attr('checked'));  }); 

or:

 $(".offer").on("click", function () {         var $checkbox = $(this).find(':checkbox');        $checkbox.attr('checked', !$checkbox.is(':checked'));  }); 

or, by directly manipulating the DOM 'checked' property (i.e. not using attr() to fetch the current state of the clicked checkbox):

 $(".offer").on("click", function () {         var $checkbox = $(this).find(':checkbox');        $checkbox.attr('checked', !$checkbox[0].checked);  }); 

...and so on.

Note: since jQuery 1.6, checkboxes should be set using prop not attr:

 $(".offer").on("click", function () {         var $checkbox = $(this).find(':checkbox');        $checkbox.prop('checked', !$checkbox[0].checked);  });