javascript - 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;
  }
});

未经测试，但我刚刚在一个项目中成功地使用了这些方法。