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

---

問題

當您單擊復選框時，也會單擊父級，因此事件再次更改其狀態時會觸發。

查看此演示以了解問題

演示小提琴