Выделение дочерних чекбоксов при клике на родительский (и наоборот) в многоуровневом

[Ninko]

Как сделать выделение чекбоксов при клике на "родительский"? Список многоуровневный, оформлен с помощью ul и li, реализовано сворачивание, разворачивание: https://jsfiddle.net/hf9osh59/1/
Но вот добиться выделения чекбоксов именно своих дочерних - не могу, постоянно выделяется не то, что надо (то "внуков" хватает, то своих родителей). С проставлением выделения на родительских классах - тоже проблема та еще..

$(document).ready(function() {
    $(".ul-dropfree div.drop").click(function() {
            if ($(this).nextAll("ul").css('display')=='none') {
                    $(this).nextAll("ul").slideDown(400);
                    $(this).css({'background-position':"-11px 0"});
            } else {
                    $(this).nextAll("ul").slideUp(400);
                    $(this).css({'background-position':"0 0"});
            }
            setTimeout( function () {
              $('#myModal').modal('handleUpdate');
              } , 500 );
    });
    
    $(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
});

    .list-select ul { display: none;}
    .list-select li:hover > ul { display: block;}
    ul.ul-treefree { padding-left:25px;}
    ul.ul-treefree ul { margin:0; padding-left:6px; }
    ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
    ul.ul-treefree li span {font-size: 20px; cursor:pointer; margin-left: 5px; }
    ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
    ul.ul-treefree li:last-child { border-left:0 none; }
    ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }
    ul.ul-dropfree div.drop {
    width:11px;
    height:11px;
    position:absolute;
    z-index:10;
    top:6px;
    left:-6px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
    background-position:-11px 0;
    background-repeat:no-repeat;
    cursor:pointer;
    }

[Nexus]

https://jsfiddle.net/hf9osh59/4/

[Ninko]

Спасибо, очень емко. А не подскажете как сделать в обратную сторону? То есть найти всех родителей и уже проставлять им либо indeterminate, либо снимать и ставить checked?

[Nexus]

this - дочерний чекбокс

$(this).parents('li').find('input').css('color','green');
//Либо
$(this).parents('li').each(function(){
    $(this).find('input').css('color','green');
})

[Ninko]

Пробовала по разному, вот что в итоге получилось:
https://jsfiddle.net/hf9osh59/7/
В итоге некорректно работает конечно же, неправильно определяет родителя и нельзя снять чекбоксы с дочерних, если там стоит indeterminate..

[Ninko]

Вот, поправила: https://jsfiddle.net/hf9osh59/9/
Теперь проблема: тыканье на родительские чеки работает на ура, при попытке снять выделение с бездетного элемента - провал. Ну и если тыкать на первый дочерний элемент - то не срабатывает с первого раза

[Ninko]

Все, разобралась)