Override Parrents Onclick Event With Checkbox Onclick?

First, sorry for my bad English. I'm making a Coupons site and have trouble with selecting and deselecting the coupons. Each coupon is in a DIV 'box' in which there is a checkbox.

Solution 1:

It seems like you want stopPropagation if the checkbox is being unchecked: http://jsfiddle.net/8Dcq8/.

$("div").click(function() {
    alert("add"); // clicking anywhere in div to add coupon
});

$(":checkbox").click(function(e) {
    if(!this.checked) { // if unchecking, remove couponalert("remove");
        e.stopPropagation(); // don't run parent onclick
    }
});

Solution 2:

If the <div> click handler looks something like this:

var$boxes = $('div.box');
$boxes.on('click', function ()
{
    // do whatever to select the coupon
});

Then the checkbox handler should look something like this:

$boxes.find('input[type="checkbox"]').on('click', function (event)
{
    event.stopPropagation();
    // do whatever to deselect the coupon
});

See event.stopPropagation().

Solution 3:

You have to cancel bubbling. See here for an explanation.

Solution 4:

You can use the jQuery Alternative, or create sub-elements with onClicks that don't target your checkbox. you might be able to use something like this also.

document.getElementById('element').checked.onreadystatechange=function(){
//code

}

good luck