JavaScript不能检查复选框

这是我的代码：https://jsfiddle.net/56xh3rLo/JavaScript不能检查复选框

下面是从的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号线是检测用户是否要点击这一页。第二行是检测用户是否在任何地方点击了.menu元素（这是黑色背景中的任何地方）。第3行将检测是否选中了.menu-btn复选框。如果选中，则会触发复选框的点击。

因此，下面是代码摘要：如果用户在任何地方点击除黑盒区域和复选框被选中，代码将触发点击复选框并取消选中该复选框。 问题是，该复选框甚至不检查。为什么它不起作用？

来源

2016-10-14 pixie123

https://jsfiddle.net/56xh3rLo/1/ – Rayon

您的处理程序设置为在每次检查时触发复选框上的“点击”...因此您立即取消选中它。 –

@Rayon现在我可以检查复选框但是当我点击黑盒子区域之外的某个地方时，我无法取消选中该复选框。 – pixie123

你想改变你的外表，如果检查

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

你现在正在做的方式是看是否点击目标有一个.menu类的祖先，但是如果您单击复选框，它将不具有该祖先。这意味着，如果外部检查将通过，那么内部如果检查将通过，因为您刚才点击了检查框。这将运行线

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

Here's the working example.

来源

2016-10-14 18:23:59

我相信这是OP寻找的答案 – Assimilater

是的，谢谢它的工作，但看看这里：https://jsfiddle.net/56xh3rLo/7/ 我想单击标签并选中复选框。这样可行。但我不能取消选中复选框就是标签。我该如何解决？ – pixie123

你想单击标签来选中或取消选中复选框？ –

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

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

来源

2016-10-14 18:15:46 darrylyeo

哦，我不知道，但它仍然无法正常工作：https://jsfiddle.net/56xh3rLo/2/ – pixie123

@ pixie123你的jsfiddle似乎在做正是它应该给我的。当你点击复选框时，它不在菜单中。现在检查，所以你的JavaScript取消选中它。 – Assimilater

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

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

    }); 
});

来源

2016-10-14 18:52:58 zusatzstoff

JavaScript不能检查复选框

回答

相关问题