JavaScript无法勾选复选框

Question

这是我的代码:https://jsfiddle.net/56xh3rLo/

这是来自jsfiddle的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行是检测用户是否点击.menu元素的任何地方(在黑色背景中的任何位置).第3行是检测是否选中了.menu-btn复选框.如果选中它,它将触发复选框上的单击.

所以,这里是代码的摘要:如果用户点击黑框区域的任何地方除外,并选中复选框,代码将触发复选框的单击,它将取消选中该复选框.问题是,复选框甚至根本没有检查.为什么不工作？

Answer 1

如果要检查,您想要更改外部

if(!$(event.target).closest('.menu').length && !$(event.target).hasClass('menu-btn')) {

你现在这样做的方法是看看点击目标是否有一个.menu类的祖先,但是如果你点击复选框,它就没有那个祖先.这意味着外部if检查将通过,然后内部if检查将通过,因为您刚刚执行的单击选中了该框.那就行了

$('.menu-btn').prop( "checked", false );

这是工作示例.