Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 15.10.2019, 17:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Значит есть ошибки, нужно заглянуть в отладчик, что он вещает.
Собственно ничего сложного нет, нужно удалить ваши обработчики флажков и добавить что я написал, а работа его проста:

//общему родителю флажков делегируется обработка изменения их состояния
//если таких блоков upsale__block__sub-right-wrap много, то этот обработчик будет выполнятся только в контексте текущего
$('div.upsale__block__sub-right-wrap').on('change', 'input', function(e) { 
    var chk = $(e.delegateTarget).find('input'); //получили все флажки текущего родителя
    //если источник события это флажок block__check, что можно проверить и так: $(this).hasClass('block__check')
    if(chk.eq(0)[0]==this) chk.slice(1).prop('checked', this.checked); //то определить его состояние всем последующим флажкам текущего родителя  
    else { //иначе это изменение флажков набора
        var c = chk.slice(1).filter(':checked').length; //есть ли выбранные флажки в наборе?
        chk.eq(0).prop({checked: c, disabled: !c}); //результат операции присвоить свойствам checked и disabled флажка block__check    
    }
});
Ответить с цитированием
  #22 (permalink)  
Старый 15.10.2019, 18:33
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,


Если я отключаю свои обработчики, тогда ваш код включает и выключает все блоки разом, а задача другая:
Цитата:
Нужно чтобы:
- чекбокс id="floor" получал галочку, когда хотя бы один из один из дочерних чекбоксов в <div class="floor__item"> имеет галочку и наоборот, если галочки снять со всех дочерних чекбоксов <div class="floor__item">, то и на id="floor" галочка убиралась (но она должна быть пока имеется хоть один включенный флаг).
- если с id="floor" снять галочку, то и со всех дочерних чекбоксов <div class="floor__item"> тоже снималась.
- если ни на одном дочернем чекбоксе <div class="floor__item"> нет, то id="floor" не кликабелен.

Чего не хватает в вашем коде, так это 1 пункта и 3 пункта
Ответить с цитированием
  #23 (permalink)  
Старый 15.10.2019, 18:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aruta
Если я отключаю свои обработчики, тогда ваш код включает и выключает все блоки разом
Да ну? Если все сверстано так как я писал (<h3>Block 1</h3> это для примера тут), то:

<div class="upsale__block__sub-right-wrap"> <h3>Block 1</h3>
    <div class="upsale__block__bot-right__title-wrap dflex">
        <div class="upsale__block__bot-right__title dflex">
            <input id="floor" type="checkbox" class="block__check" disabled="" />                            
        </div>                           
    </div>
    <div class="upsale__block__bot-right__sub-wrap dnone">
        <div class="montage__content-wrap">
            <span class="montage__text">intro text where we explain </span>
            <div class="montage__floor-wrap montage__comp-wrap dflex">
                <div class="montage__floor dflex">
                    <div class="floor__item-wrap">
                        <div class="floor__item-inner">
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 0</span>
                            </div>
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 1</span>
                            </div>
                        </div>
                    </div>                                       
                </div>
            </div>
        </div>           
    </div>           
</div>

<div class="upsale__block__sub-right-wrap"> <h3>Block 2</h3>
    <div class="upsale__block__bot-right__title-wrap dflex">
        <div class="upsale__block__bot-right__title dflex">
            <input id="floor" type="checkbox" class="block__check" disabled="" />                            
        </div>                           
    </div>
    <div class="upsale__block__bot-right__sub-wrap dnone">
        <div class="montage__content-wrap">
            <span class="montage__text">intro text where we explain </span>
            <div class="montage__floor-wrap montage__comp-wrap dflex">
                <div class="montage__floor dflex">
                    <div class="floor__item-wrap">
                        <div class="floor__item-inner">
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 0</span>
                            </div>
                            <div class="floor__item">
                                <input type="checkbox" name="groundfloor" value="groundfloor">
                                <div class="floor__item__img">
                                    <img src="catalog/view/theme/myown/image/floor/groundFloor.svg" alt="">
                                </div>
                                <span class="floor__item__text">floor__item__text 1</span>
                            </div>
                        </div>
                    </div>                                       
                </div>
            </div>
        </div>           
    </div>           
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('div.upsale__block__sub-right-wrap').on('change', 'input', function(e) {
    var chk = $(e.delegateTarget).find('input'),
        set = chk.slice(1);
    if(chk.eq(0)[0]==this) set.prop('checked', this.checked); 
    else { 
        var c = set.filter(':checked').length;
        chk.eq(0).prop({checked: c, disabled: !c});  
    }
})
</script>


Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?
Ответить с цитированием
  #24 (permalink)  
Старый 15.10.2019, 19:17
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,
Сообщение от laimas
Флажки выбираются только в своих блоках или в обоих не зависимо в каком блоке выбор или же только в своем?
флажки выбираются тогда только либо все либо ни один через главный флажок в upsale__block__bot-right__title
Ответить с цитированием
  #25 (permalink)  
Старый 15.10.2019, 19:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aruta
выбираются тогда только либо все либо ни один через главный флажок
Не понял, логика выбора не верна или что? Ели не логика, то что в "включает и выключает все блоки разом" считать блоками?
Ответить с цитированием
  #26 (permalink)  
Старый 15.10.2019, 19:25
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,
да, не верная.

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

Надо чтобы нажал даже если один из нижнихвыбран, то главный тоже имел галку.
А сейчас такого нет.
Но зато работает, что если снять галку с главног, то и с дочек снимается - это хорошо и должно быть
Ответить с цитированием
  #27 (permalink)  
Старый 15.10.2019, 19:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aruta
Выходит что при нажатии на главный чекбокс выбираются все нижние
Это верно? Иначе какой смыл в этом флажке.

Сообщение от Aruta
но при выборе нижнего (если жать именно любой из нижних) не отмечается главный
Где, тут в песочнице? А вот это клевета, либо у вас эксклюзивный браузер.
Ответить с цитированием
  #28 (permalink)  
Старый 15.10.2019, 19:33
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,
в хроме смотрю
https://prnt.sc/pjo5hk
Ответить с цитированием
  #29 (permalink)  
Старый 15.10.2019, 19:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Здесь, в песочнице, запустите код что я выставил. Верно все? А у вас не так может быть потому, если: а) либо верстка не такая и значит селектор надо изменить, б) либо есть ошибки в коде и надо в отладчике все проверить.
Ответить с цитированием
  #30 (permalink)  
Старый 15.10.2019, 19:56
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,
нет ошибок в коде не ругается ни на что

по поводу верстки я специально дал вам ссылку и инструкцию, чтобы посмотреть на живом примере как это работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замыливание нескольких div-ов при наведении на один из элементов wayrus161 Элементы интерфейса 2 31.08.2018 07:20
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
Неповторяющаяся заставка (при возвращении с других страниц сайта) thrastogotch jQuery 3 07.06.2012 17:57
Как при наведении на один объект изменять стили других? greysells jQuery 4 06.12.2009 11:00
Выделение checkbox при условии атрибута... SashaBorandi jQuery 1 07.02.2009 14:18