jQuery:使div可点击以检查嵌套复选框

Question

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#myDiv').click(function() {
            var checkBox = $(this).children("input[type='checkbox']");
            checkBox.attr('checked', !checkBox.attr('checked'))
        });
    });
</script>

<div id="myDiv" style="background-color:red;height:50px;width:50px;">
    <input type="checkbox" />
</div>

我在使div可点击时遇到问题,以便检查嵌套复选框.我想这样做只有当鼠标没有悬停复选框时此功能才有效.我怎样才能做到这一点？像这样的东西:

if (!checkBox.isHover)
    checkBox.attr('checked', !checkBox.attr('checked'))

注意这个问题之前已经在这里提出过,但答案似乎没有解决问题.包装的标签解决方案在FireFox中无法正常工作.谢谢.

Answer 1

试试这个:

$('#myDiv').click(function(evt) {
  if (evt.target.type !== 'checkbox') {
    var $checkbox = $(":checkbox", this);
    $checkbox.attr('checked', !$checkbox.attr('checked'));
    evt.stopPropagation();
    return false;
  }
});

未经测试,但我刚刚在项目中成功使用了这些内容.