JavaScript 无法选中复选框答案

【问题标题】：JavaScript cannot check checkboxJavaScript 无法选中复选框
【发布时间】：2016-10-14 18:11:46
【问题描述】：

这是来自 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 复选框是否被选中。如果选中，则会触发对复选框的点击。

所以，这里是代码的摘要：如果用户点击除黑框区域之外的任何地方并且复选框被选中，代码将触发对复选框的点击，它会取消选中复选框。 问题是，该复选框甚至根本没有选中。为什么它不起作用？

【问题讨论】：

jsfiddle.net/56xh3rLo/1
您的处理程序设置为在每次选中复选框时触发click...所以您立即取消选中它。
@Rayon 现在我可以选中复选框，但是当我单击黑框区域之外的某个位置时，我无法取消选中该复选框。
@AndréDion 我不明白，我该如何解决？
jsfiddle.net/56xh3rLo/5

标签： javascript jquery html css checkbox

【解决方案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.

【讨论】：

我相信这是 OP 正在寻找的答案
是的，谢谢它的工作，但请看这里：jsfiddle.net/56xh3rLo/7 我想点击标签并选中复选框。这样可行。但我不能取消选中复选框是标签。我该如何解决这个问题？
您要单击标签以选中或取消选中复选框吗？
完全正确。我想单击标签以选中和取消选中复选框。如果复选框被选中并且用户单击除黑色区域框以外的任何位置，我还想取消选中该复选框。
是的，看起来你明白了，干得好。

【解决方案2】：

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

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

【讨论】：

哦，我不知道，但它仍然不起作用：jsfiddle.net/56xh3rLo/2
@pixie123 你的 jsfiddle 似乎在做我应该做的事情。当您单击复选框时，它不在菜单中。它现在被选中，所以你的 javascript 取消选中它。

【解决方案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);

  });
});

【讨论】：