Uncheck a checkbox when clicking outside it

Well if you really want to use 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><divid="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

I used .stopPropagation() . Basically, clicking anywhere in body will cause checkbox to be deselected, however, if you click on the checkbox or div#menu the propagation of the event that makes the deselection will stop happening, so there may be the marking.

This method is very powerful so be careful when applying it. See here - link .

Using the response and the link provided by @SamirBraga, follow code below without using 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><divid="geral">
  <input type="checkbox" id="button-menu">
  <nav id="menu">
    Clique fora dessa div

  </nav>
</div>

The example was taken from the own link about the dangers of using stopPropagation , which according to it should only be used when you really want to cancel an event from the DOM tree, such as submitting a form.

  

Stopping propagation should be thought of as canceling an event, and   it should only be used with that intent. Maybe you want to prevent   form submission or disallow focus to an area of the page. In these   you are stopping propagation because you do not want to happen   happen, not because you have an unwanted event handler registered   higher up in the DOM.

Try this:

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