JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="chkParent" />
<div id="container">
    <p>1<input type="checkbox" class="1" /></p>
    <p>1-1<input type="checkbox" class="1-1" /></p>
    <p>1-2<input type="checkbox" class="1-2" /></p>
    <p>1-2-1<input type="checkbox" class="1-2-1" /></p>
    <p>1-2-2<input type="checkbox" class="1-2-2" /></p>
    <p>1-2-2-1<input type="checkbox" class="1-2-2-1" /></p>
    <p>1-2-2-1<input type="checkbox" class="1-2-2-2" /></p>
    <p>1-3<input type="checkbox" class="1-3" /></p>
    <p>1-3-1<input type="checkbox" class="1-3-1" /></p>
    <p>1-3-1<input type="checkbox" class="1-3-2" /></p>
    <p>2<input type="checkbox" class="2" /></p>
    <p>2-1<input type="checkbox" class="2-1" /></p>
    <p>2-2<input type="checkbox" class="2-2" /></p>
</div>

JavaScript

$(function(){
    $(":checkbox").click(function(){
        var top_name = $(this).attr("class");
        var top_checked = $(this).attr("checked");
        $(":checkbox").each(function(index){
            if ($(this).attr("class").match("^" + top_name))
            {
                $(this).attr("checked", top_checked);
            }
        });
    });
});