代码之家 › 专栏 › 技术社区 › David

jquery:make div clickable to check嵌套复选框

checkbox html jquery javascript

David · 技术社区 · 15 年前

<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中无法正常工作。谢谢您。

3 回复 | 直到 15 年前

Luke Bennett 15 年前

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

KyleFarris 15 年前

<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>