JSFiddle - React, Tailwind, and code Playground

HTML

<div id="familias" class="cascada_fam">
    <form name="casfam" action>
        <div id="v3" class="fam_00">
            <input class="fam" type="checkbox" name="0_3_3_3" onclick="check_box(this,'0','3','3','3')" value="0|3"><a class="l_tit" href="javascript:mostrardiv(&#39;3&#39;,&#39;v3&#39;);"> 
            + COMPONENTES</a> (5)
        </div>
        <div id="3" style="display:none;" class="fam_00">
            <input class="fam" type="checkbox" name="0_3_3_3" onclick="check_box(this,'0','3','3','3')" value="0|3"><a class="l_tit" href="javascript:mostrardiv(&#39;v3&#39;,&#39;3&#39;);"> 
            - COMPONENTES</a> (5)
            <div id="v36" class="fam_10">
                <input class="fam" type="checkbox" name="1_3_36_36" onclick="check_box(this,'1','3','36','36')" value="1|36"><a class="l_tit" href="javascript:mostrardiv(&#39;36&#39;,&#39;v36&#39;);"> 
                + CONTROLADORAS</a> (5)
            </div>
            <div id="36" style="display:none;" class="fam_10">
                <input class="fam" type="checkbox" name="1_3_36_36" onclick="check_box(this,'1','3','36','36')" value="1|36"><a class="l_tit" href="javascript:mostrardiv(&#39;v36&#39;,&#39;36&#39;);"> 
                - CONTROLADORAS</a> (5)
                <div id="vEH" class="fam_10">
                    <input class="fam" type="checkbox" name="2_3_36_EH" onclick="check_box(this,'2','3','36','EH')" value="2|36"><a class="l_tit" href="javascript:mostrardiv(&#39;EH&#39;,&#39;vEH&#39;);"> 
                    + Adaptadores</a> (5)
                </div>
                <div id="EH" style="display:none;" class="fam_10">
                    <input class="fam" type="checkbox" name="2_3_36_EH" onclick="check_box(this,'2','3','36','EH')" value="2|36"><a class="l_tit" href="javascript:mostrardiv(&#39;vEH&#39;,&#39;EH&#39;);"> 
                    - Adaptadores</a> (5)
                    <div id="vEH1" class="fam_10">
                    <input class="fam" type="checkbox" name="3_3_36_EH"...

CSS

.style2
        {
            height: 20px;
        }
A.l_tit        {text-decoration: none}
a:link.l_tit   {color: #0066cc}
a:visited.l_tit{color: #0066cc}
a:hover.l_tit    {color: #FF9900}

.fam{height: 10px; width: 10px;} 

.fam_00 {display:block;padding:0px;text-align: left; margin:0}
.fam_10 {display:block;padding:0px;text-align: left; margin-left:10}

.cascada_fam{
padding:0;
font-family: Verdana,Arial,Helvética;font-size: 2.7mm;
font-weight: normal;
vertical-align:text-top;
color: #0066cc;
text-transform: uppercase; 
border-top:1px solid #9999FF; border-bottom:1px solid #9999FF; 
width: 100%;
height: auto;
overflow:auto; margin-top:4px

JavaScript

function mostrardiv(el_div,la_pos) {
div = document.getElementById(el_div);
div.style.display = '';
pos = document.getElementById(la_pos);
pos.style.display='none';
}
function cerrar(el_div) {
div = document.getElementById(el_div);
div.style.display='none';
}
//Detectar checkeos
function check_box(obj,n3,n0,n1,n2) {

name_box = casfam[obj.name].name;
valor_box = casfam[obj.name].value;
valor_che = casfam[obj.name].checked;
nivel = n3

if (name_box.substring(0,1) == "v") {
    name_sin = name_box.substring(1,name_box.length)
    casfam[name_sin].checked = valor_che 
    letra = name_sin }
else
    { letra = ''}

casfam[obj.name].checked = valor_che

// DESMARCAMOS checkboxs niveles inferiores    
// Si pulsamos el nivel 3
if (n3 == "3" && valor_che == true){
    name_2 = "2_" + n0 + "_" + n1 + "_" + n2 
    casfam[name_2].checked = false
    name_1 = "1_" + n0 + "_" + n1 + "_" + n1
    casfam[name_1].checked = false
    name_0 = "0_" + n0 + "_" + n0 + "_" + n0    
    casfam[name_0].checked = false
    }
// Si pulsamos el nivel 2
if (n3 == "2" && valor_che == true){
    name_1 = "1_" + n0 + "_" + n1 + "_" + n1
    casfam[name_1].checked = false
    casfam["v" + name_1].checked = false    
    name_0 = "0_" + n0 + "_" + n0 + "_" + n0    
    casfam[name_0].checked = false
    casfam["v" + name_0].checked = false    
    }    
// Si pulsamos el nivel 1
if (n3 == "1" && valor_che == true){
    name_0 = "0_" + n0 + "_" + n0 + "_" + n0    
    casfam[name_0].checked = false
    casfam["v" + name_0].checked = false
    }        
text_box = "name_box: " + name_box + "\n" + "valor_box: " + valor_box + "\n" + "valor_che: " + valor_che + "\n" + "nivel: " + nivel + "\n" + "letra: " + letra
alert(text_box);
}