Question

我在JQ上使用了一些check box内容，即使点击了父div也是如此。我正在切换check box的值。单击div工作正常，但是当您单击复选框时，该函数将被调用两次。有什么方法可以解决这个问题吗？以下是我的代码（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();
});

我在eventbubbling上看到stackoverflow问题，但仍然对如何做到这一点感到困惑。 FIDDLE

Answer 1

如果目标不是输入

，则仅对父元素执行回调

$('.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

作为旁注，这是label元素的用途！

Answer 2

您需要使用.prop（）而不是.attr（）来设置checked属性。

$('.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();
});

演示：Fiddle

Answer 3

您可以在更改前检查是否单击了复选框。

$('.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();
    }
});

另请注意，代码使用prop而不是attr，因为当您使用布尔属性值时，应使用.prop()

DEMO

如何在jquery中停止事件冒泡？

3 个答案: