当父级具有单击事件时，复选框功能不起作用

Checkbox functionality not working when parent has a click event

本文关键字：复选框 功能 不起作用 事件 单击      更新时间：2023-09-26

我有一个复选框里面有一个点击事件附加到它的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);
   }
}

Demo: http://jsfiddle.net/h45A5/

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

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'));
});
演示

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

自己试试:http://jsfiddle.net/h45A5/3/

如果我理解正确，您希望复选框在单击div和checkbox时切换，在这种情况下，添加

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

参考更新后的小提琴

相关文章：