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

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

Answer 2

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

Answer 3

问题在于，如果您实际单击该复选框，它仍将触发div上的click事件 - 事件冒泡。您可以向复选框添加单击事件以停止冒泡，这样只有div绑定到事件。

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

3 个答案: