Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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;
    }
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2018, 12:37
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

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

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

Спасибо, очень емко. А не подскажете как сделать в обратную сторону? То есть найти всех родителей и уже проставлять им либо indeterminate, либо снимать и ставить checked?
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2018, 13:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

this - дочерний чекбокс
$(this).parents('li').find('input').css('color','green');
//Либо
$(this).parents('li').each(function(){
    $(this).find('input').css('color','green');
})
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2018, 13:51
Новичок на форуме
Отправить личное сообщение для Ninko Посмотреть профиль Найти все сообщения от Ninko
 
Регистрация: 25.01.2018
Сообщений: 5

Пробовала по разному, вот что в итоге получилось:
https://jsfiddle.net/hf9osh59/7/
В итоге некорректно работает конечно же, неправильно определяет родителя и нельзя снять чекбоксы с дочерних, если там стоит indeterminate..
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2018, 14:31
Новичок на форуме
Отправить личное сообщение для Ninko Посмотреть профиль Найти все сообщения от Ninko
 
Регистрация: 25.01.2018
Сообщений: 5

Вот, поправила: https://jsfiddle.net/hf9osh59/9/
Теперь проблема: тыканье на родительские чеки работает на ура, при попытке снять выделение с бездетного элемента - провал. Ну и если тыкать на первый дочерний элемент - то не срабатывает с первого раза
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2018, 14:48
Новичок на форуме
Отправить личное сообщение для Ninko Посмотреть профиль Найти все сообщения от Ninko
 
Регистрация: 25.01.2018
Сообщений: 5

Все, разобралась)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
menu с выпадающими подменю при наведении и раздвижное при клике bugor Элементы интерфейса 3 04.10.2010 14:32
Двойное действие при клике по ссылке spider Элементы интерфейса 5 10.11.2009 10:43
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27
Смена id при клике Nestor Общие вопросы Javascript 6 04.03.2009 19:10