检测元素外部的单击，检查是否已选中复选框，并触发单击

Question

这是我的HTML代码：

<input class="menu-btn" type="checkbox" id="menu-btn" />

这是我的JavaScript代码：

$(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if($('.menu-btn').is(':checked')) { //line 3
                $('#menu-btn').trigger('click'); //line 4
            }
        }        
    })
})

第1行有效，第2行有效，第3行无效，并且也不允许我选中该复选框。 这是为什么？

编辑：这是我想要做的：

第1行是检测是否有点击。 第2行用于检测单击是否在＃菜单之外，第3行用于检查menu-btn是否已选中。 如果未选中，则第4行将触发menu-btn单击。 问题是第3行不允许我选中该复选框（如果当前未选中）。

Answer 1

您可以使用prop来选中复选框，而不是像$('#menu-btn').prop('checked', 'checked');那样触发其点击事件$('#menu-btn').prop('checked', 'checked'); 并用$('#menu-btn').prop('checked', false);取消选中它$('#menu-btn').prop('checked', false);

切换代码：

$(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if(!$('#menu-btn').prop('checked')) { //line 3
                $('#menu-btn').prop('checked', 'checked'); //line 4
            } else {
                $('#menu-btn').prop('checked', false);
            }
        }        
    })
})

Answer 2

尝试以下切换代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).click(function() {
        $('#menu-btn').trigger('click');
    });
});
</script>
<input class="menu-btn" type="checkbox" id="menu-btn" />