Click toggle with jQuery

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); });

Another approach would be to extended jquery like this:

$.fn.toggleCheckbox = function() {    this.attr('checked', !this.attr('checked'));}

Then call:

$('.offer').find(':checkbox').toggleCheckbox();

Warning: using attr() or prop() to change the state of a checkbox does not fire the change event in most browsers I've tested with. The checked state will change but no event bubbling. You must trigger the change event manually after setting the checked attribute. I had some other event handlers monitoring the state of checkboxes and they would work fine with direct user clicks. However, setting the checked state programmatically fails to consistently trigger the change event.

jQuery 1.6

$('.offer').bind('click', function(){     var $checkbox = $(this).find(':checkbox');    $checkbox[0].checked = !$checkbox[0].checked;    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox});