Question

我有一个父div，其中包含一个复选框，我想要检查或取消选中我在父div中单击的位置或直接在复选框上。

$('.select').click(function(){
    var checkbox = $(this).find('input[type=checkbox]')
    if (checkbox.is(':checked')){
        checkbox.prop('checked', false);
    }else{
        checkbox.prop('checked', true);
    }
});

http://jsfiddle.net/halirgb/Lt2Hw/2/

问题是，如果您直接点击复选框，则不会检查：（

有人可以帮忙吗？

Answer 1

这是因为事件传播。

当您单击复选框时，复选框会更改其状态，然后事件将传播到父元素，从而到达.select元素，其中状态再次反转，以便它返回到之前的状态点击

尝试

$('.select').click(function (e) {
    var checkbox = $(this).find('input[type=checkbox]')
    if (checkbox.is(e.target)) {
        return;
    }

    checkbox.prop('checked', function (i, checked) {
        return !checked;
    });
});

演示：Fiddle

或阻止Click事件从复选框传播

$('.select').click(function (e) {
    var checkbox = $(this).find('input[type=checkbox]')
    checkbox.prop('checked', function (i, checked) {
        return !checked;
    });
});
$('.select input[type=checkbox]').click(function (e) {
    e.stopPropagation();
});

演示：Fiddle

Answer 2

Demo Fiddle

使用event.stoppropagation

在Checkbox点击事件上停止传播。

$('.select input[type=checkbox]').click(function (e) {
    e.stopPropagation();
});

<小时/> 的问题

单击复选框时，也会单击父级，以便在再次更改状态时触发事件。

检查此演示以了解问题

Demo Fiddle

Jquery检查复选框

2 个答案: