我的父div内没有几个元素复选框,img和另一个div。当我单击父div时,将使用某些背景色选择所有三个元素。这是html的外观:

<div class="jfmfs-friend" id="812290706"><input class="friend-checkbox" type="checkbox"><img src="//graph.facebook.com/picture"><div class="friend-name">Test user</div></div>


在父div选择内,我正在选中或取消选中复选框

elem.delegate(".jfmfs-friend", 'click', function(event) {
$(this).find('input').attr('checked', !$(this).find('input').attr('checked'));
});


一切正常。但是问题是,当我仅单击复选框时,它会通过上面的功能并取消选中该复选框。现在,未选中该复选框,但整个父div被选中。
我如何确保如果单击复选框,则不应运行此行?

 $(this).find('input').attr('checked', !$(this).find('input').attr('checked'));

最佳答案

通过检查事件目标类型或标记名,检查是否单击了复选框或其他元素:

elem.on('click', '.jfmfs-friend', function(e) {
    if (e.target.tagName.toLowerCase() != 'input')
        $(this).find('input')
               .prop('checked', !$(this).find('input').prop('checked'));
});

10-07 19:47
查看更多