Question

这是来自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 );

Here's the working example.

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

  });
});

JavaScript无法检查复选框

3 个答案: