JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    function allChecked(root){
    var nodes = document.getElementsByName('node');
    var checked = root.checked;
    for(var x = 0; nodes[x]; x++)
         nodes[x].checked = checked;
}
function simpleChecked(node){
    var nodes = document.getElementsByName('node');
    var total = nodes.length;
    var checkeados = 0;
    for(var x = 0; nodes[x]; x++)
         if(nodes[x].checked)
             checkeados++;
    document.getElementById('root').checked = (checkeados == total);   
}
</script>
<input type="checkbox" id="root" onclick="allChecked(this);"/> Marcar Todos<br/><br/>
<input type="checkbox" id="node1" name="node" onclick="simpleChecked(this);"/> Children 1<br/>
<input type="checkbox" id="node2" name="node" onclick="simpleChecked(this);"/> Children 2<br/>
<input type="checkbox" id="node3" name="node" onclick="simpleChecked(this);"/> Children 3<br/>
<input type="checkbox" id="node4" name="node" onclick="simpleChecked(this);"/> Children 4<br/>
<input type="checkbox" id="node5" name="node" onclick="simpleChecked(this);"/> Children 5<br/>
<input type="checkbox" id="node6" name="node" onclick="simpleChecked(this);"/> Children 6<br/>
<input type="checkbox" id="node7" name="node" onclick="simpleChecked(this);"/> Children 7<br/>
<input type="checkbox" id="node8" name="node" onclick="simpleChecked(this);"/> Children 8<br/>
<input type="checkbox" id="node9" name="node" onclick="simpleChecked(this);"/> Children 9<br/>
<input type="checkbox" id="node10" name="node" onclick="simpleChecked(this);"/> Children 10<br/>