jQuery复选框

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;
    });
});

演示： 小提琴

---

或阻止单击事件从复选框传播

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

演示： 小提琴

Answer 2

演示小提琴

使用event.stoppropagation

在复选框单击事件中停止传播。

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

---

问题

当您单击复选框时，也会单击父级，因此事件再次更改其状态时会触发。

查看此演示以了解问题

演示小提琴