Click Toggle with jQuery

Question

I've used hover function where you do x on mouseover and y and mouseout, so 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 clicked on a DIV, and unchecked if clicked again - a click toggle.

Thanks.

Answer 1

try changing this:

$(this).find(':checkbox').attr('checked', true );

to this:

$(this).find(':checkbox').attr('checked', 'checked');

Not 100% sure if that will do it, but I seem to recall having a similar problem. Good luck!

Answer 2

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

Answer 3

You could use the toggle function:

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

Answer 4

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

or:

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

Answer 5

In JQuery I don't think that click() accepts two functions for toggling. You should use the toggle() function for that: http://docs.jquery.com/Events/toggle

Answer 6

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});