How to hide the check boxes dropdown by clicking outside the dropdown

Question

I had created a sample check boxes dropdown, I facing an issue in hiding the dropdown by clicking outside the dropdwon. Below is the code

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
$('#checkboxes').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('#checkboxes').style.display = "none";
});

.category {
  width: 250px;
}

#checkboxes {
  width: 250px;
  display: none;
  border: 1px #aaa solid;
  overflow-y: scroll;
  background-color: white;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="category" onclick="showCheckboxes()">
  <option value="">Select cities
  </option>
</select>
<div id="checkboxes">
  <label> 
    <input type="checkbox" /> Bangalore
  </label>
  <label>  
    <input type="checkbox"  /> Hyderabad
  </label>
  <label>  
    <input type="checkbox" /> Delhi
  </label>
  <label>  
    <input type="checkbox" /> Mumbai
  </label>
  <label>  
    <input type="checkbox" /> Chennai
  </label>
  <label>  
    <input type="checkbox"  /> Panaji
  </label>
</div>

I want the drop down to get close by clicking outside any where. kindly help me on this i tried the script to make the display style none, but its not working

See related post https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element?rq=1 — Stefan, Mar 15 '19 at 12:45

Mamun · Answer 1 · 2019-03-15T13:06:16.570

style is a property on HTMLElement, it is not available on jQuery. You should use .css() on jQuery object:

Change

$('#checkboxes').style.display = "none";

To

$('#checkboxes').css("display","none");

Though I prefer using show()/hide() instead of setting the style property. You can check the event.target.nodeName to show()/hide() the element.

Try the following way:

function showCheckboxes() {
  if ($('#checkboxes').is(':visible')) {
    $('#checkboxes').hide();
  }
  else {
    $('#checkboxes').show();
  }
}

                      
$(document).click(function(e) {
  if(e.target.nodeName == 'BODY')
    $('#checkboxes').hide();
});

.category {
  width: 250px;
}
#checkboxes {
  width: 250px;
  display: none;
  border: 1px #aaa solid;
  overflow-y: scroll;
  background-color: white;
}
#checkboxes label {
  display: block;
}
#checkboxes label:hover {
  background-color: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="category" onclick="showCheckboxes()">
  <option value="">Select cities
  </option>
</select>
<div id="checkboxes">
  <label > 
    <input type="checkbox" /> Bangalore
  </label>
  <label>  
    <input type="checkbox"  /> Hyderabad
  </label>
  <label>  
    <input type="checkbox" /> Delhi
  </label>
  <label>  
    <input type="checkbox" /> Mumbai
  </label>
  <label>  
    <input type="checkbox" /> Chennai
  </label>
  <label>  
    <input type="checkbox"  /> Panaji
  </label>
</div>

Something weird is happening with your dropdown. When you click open the dropdown it shows all cities. If you then click next to it, it closes. But if you click again on the dropdown no data is available. and if you then again click out of it and again on it your data will be back. — mrdeadsven, Mar 15 '19 at 13:00
@mrdeadsven, you are right, didn't notice that....fixed now....thanks:) — Mamun, Mar 15 '19 at 13:11
I checked it works nice now, seems to apply to all the needs that are requested by OP +1 from me. — mrdeadsven, Mar 15 '19 at 13:30

score 0 · Answer 2 · answered Mar 15 '19 at 12:55

0

Alternatively you can try multi Select dropDownList with check Boxes using jQuery plugin as explain here MultiSelect DropDownList With CheckBoxes In ASP.Net With C# And VB.NET Using jQuery Plugin

answered Mar 15 '19 at 12:55

Sanjeev Pundir

49
1
6

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Rory McCrossan Mar 15 '19 at 13:04
1

Also note that the OP has made no mention or hint that they are using C# or ASP.Net so the link itself seems largely irrelevant to the problem – Rory McCrossan Mar 15 '19 at 13:05

How to hide the check boxes dropdown by clicking outside the dropdown

2 Answers2