JavaScript无法选中复选框

这是我的代码：

以下是来自JSFIDLE的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复选框。如果选中该复选框，则会触发对复选框的单击

---

因此，下面是代码摘要：如果用户单击除黑框区域以外的任何位置，并且复选框被选中，代码将触发单击复选框，并取消选中复选框问题是，该复选框甚至根本不检查。为什么不起作用？

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

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

---

您想将外部if支票更改为

if（！$（event.target）.最近（'.menu'）.length&&！$（event.target）.hasClass（'menu-btn'））{

您现在的操作方式是查看单击目标是否有一个带有

.menu

类的祖先，但是如果您单击复选框，它将没有该祖先。这意味着外部的if检查将通过，而内部的if检查将通过，因为刚才的单击选中了该复选框。这将运行该行

$（'.menu btn'）.prop（“选中”，false）；

---

有点表达力，但我希望读者能更清楚地了解：

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

  });
});

---

您的处理程序设置为每次选中复选框时都触发一个

点击

，因此您立即取消选中它。@Rayon现在我可以选中复选框，但当我点击黑框区域之外的某个地方时，我无法取消选中复选框。@AndréDion我不明白，我如何修复它？哦，我不知道，但它仍然不起作用k:@pixie123你的JSFIDLE似乎正是它应该对我做的。当你点击复选框时，它不在菜单中。它现在被选中了，所以你的javascript取消选中它。我相信这就是OP想要的答案是的，谢谢它起作用了，但是看这里：我想点击标签并选中复选框。这很有效。但我不能取消选中复选框是标签。如何解决此问题？要单击标签以选中还是取消选中复选框？完全正确。我要单击标签以选中并取消选中复选框。如果选中复选框，并且用户单击除“黑色区域框”以外的任何位置，我也要取消选中复选框。是的，看起来你找到了，干得好。