0

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

我有一个嵌套在 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。

4

1 回答 1

0

如果您单击复选框浏览器会自动选中/取消选中复选框。您不需要使用 JavaScript 执行此操作。

我相信bundle_offer_click你在里面选中/取消选中复选框。您应该传递一个标志作为 bundle_offer_click标志值中的第二个参数应该取决于单击的元素。并在内部bundle_offer_click基于标志对复选框采取行动。

代码：

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

       //do nothing on check box
     }
}
于 2012-09-27T10:41:16.253 回答