JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="test_ex">
    <li>
        <input type="checkbox" class="parent" /> 
        <a class="ref">Fruits</a>
        <ul class="example">
            <li>
                <input type="checkbox" class="child" />
                <a class="ref"> Apple </a>
            </li>
            <li>
                <input type="checkbox" class="child" />
                <a class="ref"> Orange </a>
            </li>
        </ul>
        <ul class="test_ex_sample">
            <li>
                <input type="checkbox" class="parent" /> <a class="ref">Birds</a>

                <ul class="example">
                    <li>
                        <input type="checkbox" class="child" /> <a class="ref"> Peacock </a>

                    </li>
                    <li>
                        <input type="checkbox" class="child" /> <a class="ref">Parrot </a>

                    </li>
                </ul>
                <ul class="example">
                    <li>
                        <input type="checkbox" class="parent" /> <a class="ref"> Food </a>

                        <ul class="example">
                            <li>
                                <input type="checkbox" class="child" /> <a class="ref">Bread </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" id="testB" value="OK" />

JavaScript

$("input:checkbox").click(function(){
    $(this).siblings("ul")
            .find("input[type=checkbox]")
            .prop("checked",this.checked);
});

$("#testB").click(function(){
    var checkedValues = 
        $('input:checkbox').map(function() {
            return $(this).previous().text(); //or html() instead of text()
        }).get();
    alert(checkedValues);
});