Показать сообщение отдельно
  #1 (permalink)  
Старый 15.10.2019, 11:20
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

Включить/отключить checkbox при включении нескольких других checkbox
Добрый день!
Задача тут встала передо мной на 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');
	};
	});

Последний раз редактировалось Aruta, 15.10.2019 в 11:47.
Ответить с цитированием