Uncheck a checkbox by clicking outside of it

Question

How is it possible to uncheck a checkbox if I click another field of the site?

The checkbox is used so that when the status is 'checked', it 'drags' my menu from -65% to 0 and appears on the screen, being used in a mobile responsive layout.

Unfortunately I have no idea how this can be done, but I believe it is in javascript/jquery.

Ex:

<header id="menuCelular">
<input type="checkbox" id="btn-menu">
<label id="barra-icon-menu" for="btn-menu"><label id="txt-menu" for="btn-menu">Menu</label></label>

<nav class="menuMobile">
<ul class="menu">

      <li id="mapa-menu" class="abre-dropdown"><a href="\\">Mapa do site</a>
        <ul class="submenu-1">
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
        </ul>
    </li>    
   <li class="abre-dropdown"><a href="\\">>Aprendizado</a>
        <ul class="submenu-1">
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
            <li><a href="\\">link</a></li>
        </ul>
    </li>
    <li class="textos-menu"><a href="\\" title="\\">Textos</a></li>    
    <li class="fotos-menu"><a href="\\" title="\\"></label>Fotos</a></li> 

</ul>
</nav>
</header>

Now, when the menu is open, if I click #menuCellular bar it does not close unless I press outside the . menuMobile region

SITE (Resize the viewport to 479px)

Answer 1

Well if you really want to use the checkBox, you can do so:

var checkbox = $('#button-menu');

$('body').not('#menu').click(function() {
  checkbox.prop("checked", false);
});

$('#button-menu, #menu').click(function(event) {
  event.stopPropagation();

});

#geral {
  width: 200px;
  height: 200px;
  background: #333;
}

#menu {
  width: 200px;
  height: 100px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

I used the .stopPropagation(). Basically, by clicking anywhere on body you will make the checkbox is unchecked, however, if you click either the checkbox or the div#menu the spread of the event that makes the cancellation will no longer happen, so there may be the marking.

This method is very powerful so be careful when applying it. See here - https://css-tricks.com/dangers-stopping-event-propagation/.

Answer 2

Using the answer and the link offered by @Samirbraga, follows below code without using the event.stopPropagation();

var checkbox = $('#button-menu');

$(document).on('click', function(event) {
  if (!$(event.target).closest('#button-menu, #menu').length) {
    checkbox.prop("checked", false);
  }
});

#geral {
  width: 200px;
  height: 200px;
  background: #333;
}

#menu {
  width: 200px;
  height: 100px;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

The example was taken from own link on the dangers of using the stopPropagation, that according to the same should be used only when you really want to cancel an event of the DOM tree, as for example the submission of a form.

Stopping Propagation should be thought of like canceling an Event, and it should only be used with that Intent. Perhaps you want to Prevent a form Submission or disallow Focus to an area of the page. In These cases you’re Stopping Propagation because you don’t want an Event to happen, not because you have an unwanted Event Handler Registered Higher up in the DOM.

Answer 3

Try it this way:

$("#geral").not("#menu, #barra-icon-menu").click(function(){
    $("#button-menu").prop("checked", false);
    $("#barra-icon-menu").click();
});