javascript - 在父 div 中选中的复选框

Question

我在父 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'));

Answer 1

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

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