JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Menu</button>
  <div class="dropdown-content" id="myDropdown">
    <ul class="formParent">
          <li><label><input type="checkbox" class="chkBox" />Apple</label></li>
          <li><label><input type="checkbox" class="chkBox" />Orange</label></li>
          <li><label><input type="checkbox" class="chkBox" />Grapes</label></li>
          <li><label><input type="checkbox" class="chkBox" />Berry</label></li>
          <li><label><input type="checkbox" class="chkBox" />Mango</label></li>
          <li><label><input type="checkbox" class="chkBox" />Banana</label></li>
          <li><label><input type="checkbox" class="chkBox" />Tomato</label></li>
          <li><button type="button" class="checkall" onClick="checkAll()">Select</button></li>
        </ul>
  </div>
</div>

<!--<div class="dropdown">
  <button class="dropbtn" onclick="myFunction(e)">Menu</button>
  <div class="dropdown-content" id="myDropdown">
    <ul class="formParent">
          <li><label><input type="checkbox" class="chkBox" />Apple</label></li>
          <li><label><input type="checkbox" class="chkBox" />Orange</label></li>
          <li><label><input type="checkbox" class="chkBox" />Grapes</label></li>
          <li><label><input type="checkbox" class="chkBox" />Berry</label></li>
          <li><label><input type="checkbox" class="chkBox" />Mango</label></li>
          <li><label><input type="checkbox" class="chkBox" />Banana</label></li>
          <li><label><input type="checkbox" class="chkBox" />Tomato</label></li>
          <li><button type="button" class="checkall" onClick="checkAll(e)">Select</button></li>
        </ul>
  </div>
</div>-->

CSS

.dropdown {
  float: right;
  margin-right: 115px;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: #ff0000;
  font-family: inherit;
  margin: 0;
}

.dropbtn:hover {
  cursor: pointer;
}

.dropdown:hover {
  background-color: #ff7b7b;
  text-decoration: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ff7b7b;
}

.show {
  display: block;
  z-index: 11;
}

JavaScript

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if ((!event.target.matches('.dropbtn')) && !(document.getElementsByClassName('formParent')[0].contains(event.target))) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

//CHECKBOX FUNCTIONALITY START
var isChecked = false;
function checkAll() {
    var checkboxes = document.getElementsByClassName('chkBox');
     if (isChecked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
  isChecked = !isChecked;
 }