Javascript Jquery复选框

我有一个父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);
    }
});

问题是，如果您直接单击复选框，它不会选中：

---

有人能帮忙吗

这是因为事件传播

当您首先单击复选框时，复选框将更改其状态，然后事件将传播到父元素，从而到达。select元素，该元素的状态将再次反转为。因此，它将返回到单击之前的状态

试一试

演示：

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

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

演示：

使用

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

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

问题

当您单击复选框时，也会单击父项，以便在再次更改其状态时触发事件

检查此演示以了解问题

---

非常感谢。我在找一天的工作。

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