Jquery check複選框

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/

的問題是，如果你直接點擊複選框就DOS不檢查:(

誰能幫助？

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

---

或阻止點擊的傳播來自複選框的事件

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

停止傳播的複選框單擊事件。

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

---

問題

當你點擊複選框父也因此點擊事件觸發時改變它再次狀態。

檢查這個演示，瞭解問題

Demo Fiddle