Toggle Checkbox with jQuery on parent click

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.

All you need to do is check the event target of the click, and if it is a checkbox, don't do the manual changing of the checked property:

$(function () {
    $(".item").on("click", function (e) {
        if (!$(e.target).is(':checkbox')) {
            var $checkbox = $(this).find("input[type='checkbox']");
            $checkbox.click();
        }
        $(this).toggleClass('selected');
    });
}

Note: you can use $checkbox.prop("checked", !objCheckbox.prop("checked")); to toggle the checkbox, but if you have events that only trigger onclick of the checkbox, $checkbox.click(); works best.

that is because since you checkbox is inside the div...it is taking the click event of its parent div.. eventBubble(). check if the clicked element is the target element.. if yes do the thing you want...

try this

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

fiddle here

This would work well with a label:

<label for="checkboxid">
    <div class="item">
        <input type="checkbox" id="checkboxid" />
    </div>
</label>

$('#checkboxid').on('change', function() {
    $('.item').toggleClass('selected');
});

Your code works with div click, but clicking the checkbox instantly unchecked because of that, you write a code !checkbox.attr("checked") to unchecks check-box.

So, if you want to do this work - first you need to revert the Checked attribute.

Try This Example

There is an another condition, every time click on check-box binds click event to div. So if you don't want this you need to check clicked Element. For this you use event.toElement.

Try This Example

This is what I used:

$('body').on('click', '.item', function (event) {
    if (event.target.tagName.toLowerCase() == 'input') return;
    var objCheckbox = $(this).find("input[type=checkbox]");
    if (objCheckbox.length >= 1) {
        objCheckbox.prop("checked", !objCheckbox.prop("checked"));
    }
});
$('body').on('click', 'input[type=checkbox]', function (e) {
    $(this).parent().click();
    $(this).prop("checked", !$(this).prop("checked"));
});

Don't bind to body if you have other checkboxes on your page.

The event is fired twice when you click the check box. You need to stop the event being bound on the checkbox and bind the event on the parent element only like so.

http://jsfiddle.net/sX3w9/15/

$('.item').on('click', function() {
var checkbox = $(this).find('input');

checkbox.click(function(e){
    e.stopPropagation();
}).attr("checked", !checkbox.attr("checked"));

$(this).toggleClass('selected');

});