Добрый день!
Задача тут встала передо мной на jQuery... часть её решения нашел, но вот над этой частью бьюсь и не получается никак.
Ссылка на вид страницы:
http://prntscr.com/pjfpdb
Нужно чтобы:
- чекбокс id="floor" получал галочку, когда хотя бы один из один из дочерних чекбоксов в <div class="floor__item"> имеет галочку и наоборот, если галочки снять со всех дочерних чекбоксов <div class="floor__item">, то и на id="floor" галочка убиралась (но она должна быть пока имеется хоть один включенный флаг).
- если с id="floor" снять галочку, то и со всех дочерних чекбоксов <div class="floor__item"> тоже снималась.
- если ни на одном дочернем чекбоксе <div class="floor__item"> нет, то id="floor" не кликабелен.
Весь код jQuery должен быть написан не от id, а по дочка/родитель, т.к. подобный код в других частях страницы планируется использовать.
ниже код html только с одним из 4-х блоков, которые содержат чекбокс, который нужно прослушивать, т.к. остальные 3 блока отличаются только картинкой и подписью под ней. onclick="event.stopPropagation()" для id="floor" сделан, чтобы при раскрытии дочернего блока id="floor" не отмечался, т.к. блок ниже строки "Choose your floor" открывается по нажатию на родителя id="floor"
<div class="upsale__block__sub-right-wrap">
<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" onclick="event.stopPropagation()"/>
</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 id="first_floor" 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"><?php echo $this->language->get('text_floor_0'); ?></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
У меня уже есть код, который активирует чекбоксы в блоках <div class="floor__item"> - с ним я справился за 3 часа, т.к. новенький в этом деле
может пригодится при рассмотрении моего вопроса
$('.montage__floor').on('click', '.floor__item-wrap', function() {
var $input = $(this).children('.floor__item-inner').children('.floor__item').children('input');
if ($input.prop('checked')) {
$input.prop('checked',false);
$(this).css('background', 'none');
}else{
$input.prop('checked',true);
$(this).css('background', '#bbd9ff');
};
});
