Показать сообщение отдельно
  #1 (permalink)  
Старый 25.01.2018, 12:25
Новичок на форуме
Отправить личное сообщение для Ninko Посмотреть профиль Найти все сообщения от Ninko
 
Регистрация: 25.01.2018
Сообщений: 5

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