Toggle Checkbox with jQuery on parent click

Question

I have the following code example: http://jsfiddle.net/sX3w9/

$('.item').on('click', function() {
            var checkbox = $(this).find('input');
            checkbox.attr("checked", !checkbox.attr("checked"));    
            $(this).toggleClass('selected');
        });

Where a user should be able to click the div.item and/or the checkbox inside it and it should check or uncheck the checkbox and add or remove the selected class from the div.

It works when clicking the div, but clicking the checkbox instantly unchecks it again...

Answer 1

Try the following code:

$('.item').on('click', function() {
            var checkbox = $(this).find('input');
            checkbox.attr("checked", !checkbox.attr("checked"));    
            $(this).toggleClass('selected');
        });
$(".item input").on("click", function(e){
    e.stopPropagation();
    $(this).parents(".item").toggleClass('selected');
});

The problem is that when you check checkbox clicking on div occurs and it makes checbox unchecked again.