JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<ul>
<li class="choice"><label>Choice One <input type="checkbox" name="cat-1"></label></li>
<li class="choice"><label>Choice Two <input type="checkbox" name="cat-2"></label>
  <ul class="sub-choices">
    <li><label>Sub-Choice Two-A <input type="checkbox" name="cat-2-sub"></label></li>
    <li><label>Sub-Choice Two-B <input type="checkbox" name="cat-2-sub"></label></li>
    <li><label>Sub-Choice Two-C <input type="checkbox" name="cat-2-sub"></label></li>
  </ul>
</li>
<li class="choice"><label>Category Three <input type="checkbox" name="cat-3"></label></li>
</ul>

CSS

.sub-choices {
  display: none;
}
.choice.checked > .sub-choices {
  display: block;
}

JavaScript

document.body.addEventListener('click', function(evt) {
	if (evt.target.type == "checkbox") {
  	var container = evt.target.parentNode.parentNode; 
    container.classList.toggle('checked');
    if (!evt.target.checked) {
    	var childCheckboxes = container.querySelectorAll('.sub-choices input[type="checkbox"]');
    	Array.prototype.forEach.call(childCheckboxes, function(input) {
      	input.checked = false;
      });
    } 
  }
});