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

这是工作示例。

Answer 2

使用jQuery取消选中复选框的正确方法：

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

Answer 3

有点表达，但我希望读者会更清楚：

$(document).ready(function() {
  var $window = $(window);
  var $btn = $('.menu-btn');

  $window.on('click', function (event) {
    var $target = $(event.target);

    if($target.is($btn)) {
      return;
    }

    if($btn.is(':checked') === false) {
      return;
    }

    if ($target.closest('.menu').length > 0) {
      return;
    }

    $btn.prop('checked', false);

  });
});