How to stop event bubbling in jquery?

Question

I'm using some JQ stuff on check box , even if the parent div is clicked. I am toggling the value of check box . Clicking on div is working perfectly but when you click on checkbox the function is called twice. Is there any way to solve this problem? following is my code( Fiddle ) HTML:

<div class="check-unit">
    <input type="checkbox" class="check" />
    <p class="brandList">Model</p>
</div>

JQ:

$('.check').on('change',function(e){
    e.stopImmediatePropagation();
    if($(this).is(':checked')){
        console.log("checked");
    }else{
        console.log("unchecked");
    }
});

$('.check-unit').on('click',function(e){
    var checkbox = $(this).children('.check'),
    chhhk= checkbox.attr('checked') ? false : true;
    checkbox.attr('checked',chhhk);
    $(this).children('.check').change();
});

I've seen eventbubbling problem on stackoverflow , but still confused how to do this. FIDDLE

Answer 1

Only execute the callback on the parent element if the target is not the input

$('.check').on('change',function(e){
    if(this.checked){
        console.log("checked");
    }else{
        console.log("unchecked");
    }
});

$('.check-unit').on('click',function(e){
    if ( ! $(e.target).hasClass('check')) {
        $(this).children('.check').prop('checked', function(_,state) {
            return !state;
        }).trigger('change');
    }
});

FIDDLE

As a sidenote, this is what label elements are for!

Answer 2

You need to use .prop() instead of .attr() to set the checked property.

$('.check').on('change', function (e) {
    if (this.checked) {
        console.log("checked");
    } else {
        console.log("unchecked");
    }
}).click(function (e) {
    //prevent clicks in the checksboxes from bubbling up otherwise when you click on the checkbox the state will get toggled again the event will be bubbled to check-unit which will again toggle the state negating the click
    e.stopPropagation()
});
$('.check-unit').on('click', function () {
    var checkbox = $(this).children('.check'),
        //use .is() and checked-selector to check whether the checkbox is checked
        chhhk = checkbox.is(':checked');
    //use .prop() instead of .attr() & toggle the checked state
    checkbox.prop('checked', !chhhk).change();
});

Demo: Fiddle

Answer 3

You can check if you are clicking the checkbox before changing.

$('.check-unit').on('click', function (e) {
    if (!($(e.target).hasClass('check'))) {
        var checkbox = $(this).children('.check'),
            chhhk = checkbox.prop('checked');
        checkbox.prop('checked', !chhhk).change();
    }
});

Also note that the code is using prop instead of attr because when you are using boolean attribute values you should use .prop()

DEMO