JSFiddle - React, Tailwind, and code Playground

HTML

<div id="checkbox">
  <label>
    <input id="highlightall" type="checkbox"> Check all
  </label>
</div>
<div class="checkboxall">
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox2
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input class="highlight" type="checkbox"> Checkbox3 
    </label>
  </div>
</div>

CSS

.checkboxall {
background:#222;
padding:10px;
color:#fff;}

JavaScript

function preparePage() {
  document.getElementsByClassName("highlight").onclick = function() {
    if (document.getElementsByClassName("highlight").checked) {
      // use CSS style to show it
      document.getElementsByClassName("checkbox").style.border = "thick solid #0000FF";
    } else {
      // hide the div
      document.getElementsByClassName("checkbox").style.border = "none";
    }
  };
  // now hide it on the initial page load.
  document.getElementsByClassName("checkbox").style.border = "none";
}

window.onload = function() {
  preparePage();
};