javascript - 当 parent 有点击事件时，复选框功能不起作用

Question

我在 div 中有一个复选框，它附加了一个点击事件。但是直接选中和取消选中复选框是行不通的。

<div class="container" onclick="select(this)">
     <input type="checkbox" value="" /><label>Item</label>
</div>

function select(e) {
    var elm = $(e);
    var chkBox = elm.find('input');
    console.log(chkBox.is(':checked'));
    if(chkBox.is(':checked')) {
       chkBox.prop("checked", false);
   }else{
       chkBox.prop("checked", true);
   }
}

演示:http://jsfiddle.net/h45A5/

Answer 1

尝试正确绑定(bind)事件而不是使用内联处理程序，

HTML:

<div class="container">
    <input type="checkbox" value="" /><label>Item</label>
</div>

JS:

$('div.container').click(function(e){
   if($(e.target).is(':checkbox')){ return; }
   var chkBox = $(this).find(':checkbox');
   chkBox.prop("checked", !chkBox.is(':checked'));
});

DEMO