Javascript jQuery阻止嵌套在另一个DIV中的复选框检查

关于这个问题，我已经研究并尝试了许多答案，但似乎找不到有效的解决方案。我可能遗漏了一些明显的东西，在这种情况下我道歉，但我的问题是：

我在一个DIV元素中嵌套了一个复选框，这个DIV元素附带了一个jQuery click事件，它会检查复选框是否被选中，然后选中/取消选中它。根据是否已选中/未选中，它将向PHP脚本发送一个变量以添加到会话变量中

当单击的是DIV时，这一切都可以正常工作，但是当单击复选框时，我认为会出现一些冒泡，因为每次都会触发取消选中复选框的事件。我试过使用

stopPropogation（）和
preventDefault（）附加到复选框单击事件，但无效

下面是一些示例代码，试图让这一点更清楚：

复选框HTML代码：

<div class='bundle_offer' id='bundle_offer_0'>
    <input type="checkbox" />
</div>

// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {

    // IF its not the checkbox clicked, send over the div id
    if (event.target.type !== 'checkbox') {

        var bundle_offer_div_id = "#"+this.id;
        bundle_offer_click(bundle_offer_div_id);
    }
    // ELSE find div id and send it
    else{
        var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
        bundle_offer_div_id = "#"+bundle_offer_div_id;
        bundle_offer_click(bundle_offer_div_id);
    }
}); // end bundle offer click function

bundle\u offer\u click
函数只需获取所单击DIV的id，找到复选框，选中/取消选中它，然后通过AJAX将适当的变量发送到PHP脚本

编辑：

<div class='bundle_offer' id='bundle_offer_0'>
    <input type="checkbox" />
</div>

// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {

    // IF its not the checkbox clicked, send over the div id
    if (event.target.type !== 'checkbox') {

        var bundle_offer_div_id = "#"+this.id;
        bundle_offer_click(bundle_offer_div_id);
    }
    // ELSE find div id and send it
    else{
        var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
        bundle_offer_div_id = "#"+bundle_offer_div_id;
        bundle_offer_click(bundle_offer_div_id);
    }
}); // end bundle offer click function

我通过稍微绕过逻辑解决了这个问题，以下是我将其更改为：

// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {

    // Get whether checked or not
    var isChecked = $(this).find('input').is(':checked');

    // IF its not the checkbox clicked
    // check/uncheck
    // send over the div id
    if (event.target.type !== 'checkbox') {
        if(isChecked == false){
            // Check
            $(this).find('input').attr('checked',true);
        }
        else{
            // Uncheck
            $(this).find('input').attr('checked',false);
        }
        var bundle_offer_div_id = "#"+this.id;
        bundle_offer_click(bundle_offer_div_id, isChecked);
    }

    // ELSE find div id and send it
    else{   
        var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
        bundle_offer_div_id = "#"+bundle_offer_div_id;
        bundle_offer_click(bundle_offer_div_id, isChecked);
    }
}); // end bundle offer click function

主要区别在于使用
mouseup
函数，并执行逻辑以选中/取消选中该mouseup函数中的复选框，而不是单击
bundle\u提供一个。
如果您单击复选框浏览器，则会自动选中/取消选中复选框。您不需要使用JavaScript来实现这一点

我相信在
bundle\u offer\u单击
时，您正在选中/取消选中复选框。您应该在
bundle\u offer\u click中传递一个标志作为第二个参数
标志值应该取决于单击的元素。在
bundle\u offer\u中，单击基于标志的
对复选框采取行动

代码：

为什么要将复选框包装到
DIV
？为什么不为复选框定义一个类或Id并捕获其事件？？？我将其包装到一个DIV中，因为上面的代码简化了，事实上，DIV中还有其他东西，然后被拉入bundle\u offer\u click函数传递到PHP脚本中。感谢类似的方法似乎解决了我的问题，我将更新我的原始帖子，说明我是如何做到的