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

您应该写var elm = getElementById('e');而不是var elm = $(e);

亲自尝试：http://jsfiddle.net/h45A5/3/

Answer 2

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

<强> 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

Answer 3

如果我理解正确，您需要在div和checkbox被点击时切换复选框，在这种情况下，添加

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

Refer updated fiddle

当父进程有click事件时，复选框功能不起作用

3 个答案:

DEMO