JavaScript kann nicht überprüfen Checkbox

Question

Dies ist mein Code: https://jsfiddle.net/56xh3rLo/

Hier ist die Javascript aus dem jsfiddle:

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

wie Sie sehen können, Linie 1 ist zu erkennen, ob ein Benutzer klicken, ist los Die Seite. Zeile 2 soll erkennen, ob der Benutzer irgendwo anklickt, AUSSER für das Element .menu (das sich irgendwo im schwarzen Hintergrund befindet). Zeile 3 soll erkennen, ob das Kontrollkästchen .menu-btn aktiviert ist. Wenn es aktiviert ist, wird ein Klick auf das Kontrollkästchen ausgelöst.

Also, hier ist die Zusammenfassung des Codes: wenn der Benutzer irgendwo anklickt, AUSSER für den Black-Box-Bereich und das Kontrollkästchen ist aktiviert, wird der Code einen Klick auf das Kontrollkästchen auslösen und es das Kontrollkästchen deaktivieren. das Problem ist, das Kontrollkästchen überprüft überhaupt nicht. Warum funktioniert es nicht?

Answer 1

Sie Ihre Außen ändern möchten, wenn Scheck an

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

Die Art und Weise Sie es jetzt tun, ist zu sehen, wenn Das Klickziel hat einen Vorgänger mit der Klasse .menu, aber wenn Sie auf das Kontrollkästchen klicken, wird es diesen Vorfahren nicht haben. Das bedeutet, dass der äußere if-Test bestanden wird, dann wird der innere if-Test bestanden, weil der Klick, den Sie gerade gemacht haben, das Kästchen aktiviert hat. Das wird die Linie

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

Here's the working example.

Answer 2

Der richtige Weg, eine Checkbox mit jQuery zu deaktivieren:

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

Answer 3

Ein wenig ausdrucksvoll laufen, aber ich hoffe, dass es den Leser klarer sein wird:

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

    }); 
});