Question

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

我有一个嵌套在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_offer_click函数只需单击DIV的id，找到复选框，检查/取消选中它，然后通过AJAX将适当的变量发送到PHP脚本。

修改

我设法通过绕过逻辑来解决问题，这是我将其更改为：

// 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_offer_click函数。

Answer 1

如果您点击复选框，浏览器会自动选中/取消选中复选框。你不需要使用JavaScript来做到这一点。

我相信在bundle_offer_click内你正在检查/取消选中复选框。你应该传递一个标志作为bundle_offer_click中的第二个参数标志值应该取决于被点击的元素。并在bundle_offer_click内部基于标记对复选框执行操作。

代码：

function bundle_offer_click(id, isCheckBoxClicked){
    if(isCheckBoxClicked){

       //do nothing on check box
     }
}

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

1 个答案: