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

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Выделение дочерних чекбоксов при клике на родительский (и наоборот) в многоуровневом (https://javascript.ru/forum/jquery/72384-vydelenie-dochernikh-chekboksov-pri-klike-na-roditelskijj-i-naoborot-v-mnogourovnevom.html)

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

Как сделать выделение чекбоксов при клике на "родительский"? Список многоуровневный, оформлен с помощью 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;

    }

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

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

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

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

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

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