Como posso criar uma visualização em árvore recolhível com caixas de seleção em javascript puro

Veja só, é uma solução muito simples que acabei de criar, estão faltando os ícones de menos e mais aqueles que você pode adicionar com css.

https://jsfiddle.net/erubielgm/93k1wqxg/

CSS

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

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

HTML

<div class="parent-check">
   <input type="checkbox"><label>Level 1</label>
   <div class="child-check">
     <input type="checkbox"><label>Level 1.1</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 1.1</label>
     </div>
   </div>
</div>
<div class="parent-check">
   <input type="checkbox"><label>Level 2</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 2.1</label>
     </div>
</div>

JavaScript

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 + ' ');
}