JSFiddle - React, Tailwind, and code Playground

HTML

<div class="level-1">
    <input class="check-all-1" type="checkbox" />fasz
    <div class="level-2">
        <input class="check-all-1-1" type="checkbox" />fasz
        <div class="level-3">
            <input class="check-all-1-1-3" type="checkbox" />fasz
            <div class="level-3-content">
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz</div>
        </div>
        <div class="level-3">
            <input class="check-all-1-2-3" type="checkbox" />fasz
            <div class="level-3-content">
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz</div>
        </div>
    </div>
    <div class="level-2">
        <input class="check-all-2-1" type="checkbox" />fasz
        <div class="level-3">
            <input class="check-all-2-1-1" type="checkbox" />fasz
            <div class="level-3-content">
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz</div>
        </div>
    </div>
</div>
<br />
<div class="level-1">
    <input class="check-all-2" type="checkbox" />fasz
    <div class="level-2">
        <input class="check-all-2-1" type="checkbox" />fasz
        <div class="level-3">
            <input class="check-all-2-1-1" type="checkbox" />fasz
            <div class="level-3-content">
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz</div>
        </div>
        <div class="level-3">
            <input class="check-all-2-1-2" type="checkbox" />fasz
            <div class="level-3-content">
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz
                <input type="checkbox" />fasz</div>
        </div>
    </div>
    <div class="level-2">
        <input...

CSS

.level-1 {
    background-color:red;
}
.level-2 {
    background-color:green;
    margin-left:10px;
}
.level-3 {
    background-color:blue;
    margin-left:10px;
}
.level-3 .level-3-content {
    background-color:yellow;
    margin-left:10px;
}

JavaScript

function selectAllUnder(level, action) {
    //action: true = checked, false = unchecked
    if (action == true) {
        $('.level-' + level + ' :checkbox').prop('checked', true);
    } else {
        $('.level-' + level + ' :checkbox').prop('checked', false);
    }
    //if under level uncheck upper levels
    if (level == 2) {
        $('.check-all-1').prop('checked', false);
    } else if (level == 3) {
        $('.check-all-1, .check-all-2').prop('checked', false);
    }
    //if level-3-content options get chacked uncheck upper levels
    if (level == false) {
        $('.check-all-1, .check-all-2, .check-all-3').prop('checked', false);
    }
}

$("[class^='check-all-']").click(function () {
    var getClass = '.' + $(this).prop("class");
    var getLevel = getClass.match(/\d+/);
    if ($(getClass).is(':checked')) {
        selectAllUnder(getLevel, true); //checked
    } else {
        selectAllUnder(getLevel, false); //unchecked
    }
});

$(".level-3-content :checkbox").click(function () {
    selectAllUnder(false, true);
});