Jquery checkbox tree uncheck parents if not all children are checked in spans

I have a checkbox list in spans. I need uncheck all parents if children (grandchildren etc) are not all selected and check back again parents and granparents if all children are selected again.

I think I need to use

if($(".classes").length == $(".classes:checked").length) {}

somewhere in my code, not sure where and how.

My code unchecks parents but not check back if user checks all children. And code does not work at all with input in Div - the highest one in hierarchy.

My HTML:

<div class="sections" id="SectionA">
<a><img src="//placehold.it/14x14"></a>
<input type="checkbox" name="items[]" class="regular-checkbox" id="A" value="A" />
<label for="A"></label>Section A 
    <span class="units" id="01units ">
        <a><img src="//placehold.it/14x14"></a>
        <input type="checkbox" name="items[]" class="regular-checkbox" id="ckeck01" value="01"/>
        <label for="01"></label>01 Dresses
            <span class="groups" id="01\.1hide">
                <a><img src="//placehold.it/14x14"></a>
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.1" value="01.1"/>
                <label for="01\.1"></label>01.1 Summer dresses
                <span class="classes" id="01\.11hide">
                    <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.11" value="01.11"/>
                    <label for="01.11"></label>AAAA0001 
                </span>
                <span class="classes" id="01\.12hide">
                    <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.11" value="01.12"/>
                    <label for="01.12"></label>AAAA0002 
                </span>
            </span> 
            <span class="groups" id="01\.2hide">
                <a><img src="//placehold.it/14x14"></a>
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.12" value="01.12"/>
                <label for="01\.2"></label>01.2 Winter dresses
                <span class="classes" id="01\.20hide">
                    <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.20" value="01.20"/>
                    <label for="01.20"></label>AAAA000
                </span>
                <span class="classes" id="01\.21hide">
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.21" value="01.21"/>
                <label for="01.21"></label> AAAA0004
                </span>
            </span> 
            <span class="groups" id="01\.3hide">
                <a><img src="//placehold.it/14x14"></a>
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.3" value="01.3"/>
                <label for="01\.3"></label> 01.3 Prom dresses
            </span>
    </span> 
    <span class="units" id="02units">
    <a><img src="//placehold.it/14x14"></a>
    <input type="checkbox" name="items[]" class="regular-checkbox" id="ckeck02" value="02"/>
    <label for="02"></label>02 Skirts
        <span class="groups" id="02\.1hide">
            <a><img src="//placehold.it/14x14"></a>
            <input type="checkbox" name="items[]" class="regular-checkbox" id="02\.1" value="02.1"/>
            <label for="02\.1"></label>02.1 Summer 
        </span>
        <span class="groups" id="02\.2hide">
            <a><img src="//placehold.it/14x14"></a>
            <input type="checkbox" name="items[]" class="regular-checkbox" id="02\.2" value="02.2"/>
            <label for="02\.2"></label>02.2 Winter          
        </span>
        <span class="groups" id="02\.3hide">
            <a><img src="//placehold.it/14x14"></a>
            <input type="checkbox" name="items[]" class="regular-checkbox" id="02\.3" value="02.3"/>
            <label for="02\.3"></label>02.3 Casual skirts
        </span>
    </span>

My Jquery:

$(document).ready(function () {
$(function () {
    $("input[type='checkbox']").change(function () {
        $(this).siblings('span')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
});



$("input:checkbox").change(function () {

    if ($(this).is(':checked')) {

        $(this).parent().find("input:checkbox").attr('checked', 'checked');
    } else {
        // children
        $(this).parent().find("input:checkbox").removeAttr('checked');
        // parents
        $(this).parents('span').each(function () {
            $(this).children('input:checkbox').removeAttr('checked');
        });
    }
});
});

CSS:

    .sections {
    display: block;
    width:100%;
    margin-top: 5px;
    margin-right: 0;
}
.units {
    display: block;
    margin-top: 5px;
    margin-left: 15px;
}
.groups {
    display: block;
    margin-top: 5px;
    margin-left: 25px;
}
.classes {
    display: block;
    margin-top: 5px;
    margin-left: 35px;
}
img, input[type=checkbox] {
    float:left;
}

Link to JSfiddle: http://ift.tt/1LHeMAT