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