JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="parent-check" ng-repeat="data in master.option">
  <input type="checkbox"><label>{{data.name}}</label>
  <div class="child-check" ng-repeat="item in data.subcategory">
    <input type="checkbox"><label>{{item.name}}</label>
  </div>
</div>

CSS

.child-check {
  margin-left: 15px;
  display: none;
}

.child-check.active {
  display: block;
}

JavaScript

var master = {
	option: [
  	{
    	name: 'item 1',
      subcategory: [
      	{ name: 'item 1, sub 1' }
      ]
    },
  	{
    	name: 'item 2',
      subcategory: [
      	{ name: 'item 2, sub 1' }
      ]
    }
  ]
}
var checks = document.querySelectorAll("input[type=checkbox]");
for (var i = 0; i < checks.length; i++) {
	checks[i].addEventListener('change', function () {
    if (this.checked) {
      showChildrenChecks(this);
    } 
    else {
      hideChildrenChecks(this)
    }
  });
}
function showChildrenChecks(elm) {
  var pN = elm.parentNode;
  var childCheks = pN.children;
  for (var i = 0; i < childCheks.length; i++) {
    if (hasClass(childCheks[i], 'child-check')) {
      childCheks[i].classList.add("active");
    }
  }
}
function hideChildrenChecks(elm) {
  var pN = elm.parentNode;
  var childCheks = pN.children;
  for (var i = 0; i < childCheks.length; i++) {
    if (hasClass(childCheks[i], 'child-check')) {
      childCheks[i].classList.remove("active");
    }
  }
}
function hasClass(elem, className) {
  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}