Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Включить/отключить checkbox при включении нескольких других checkbox (https://javascript.ru/forum/misc/78653-vklyuchit-otklyuchit-checkbox-pri-vklyuchenii-neskolkikh-drugikh-checkbox.html)

Aruta 16.10.2019 10:05

laimas,
Простите, если я не прав и туплю:)
Но ведь это родитель основного флажка и блока со второстепенными.
на нём висит ваш код и код показать/скрыть дочерний блок .upsale__block__bot-right__sub-wrap, который выступает обёрткой для блоков со второстепенными чекбоксами.

Т.е. обработчик чекбокса там только один - ваш, а прерывание висит, чтобы при нажатии на чекбокс не срабатывал скрипт показать/скрыть блок

laimas 16.10.2019 10:26

Цитата:

Сообщение от Aruta
Но ведь это родитель основного флажка и блока со второстепенными.

Ну естественно, ведь вы делегируете обработку флажков родителю. А в ней помимо моего кода и ваш, следовательно, если change не работает и заменить его на click, то не кучу обработчиков нужно вешать на родителя или на родителя плюс конкретный флажок, а либо в одном обработчике проверять источник и выполнять нужные операции или же разделять обработку событий посредством пространства имен.

Aruta 16.10.2019 13:08

laimas,
Я наверное тупой :cray:
НО загвоздка не в главном чекбоксе, а то что событие клика не назначено на родителя второстепенных чекбоксов, чтобы активировать дочерний чекбокс.

Схематично если, то сейчас:
блок 1 > input.
click происходит по умолчанию на input, чтобы галка встала.

А надо:
блок 1 > input
click должен быть на блок 1, чтобы галка встала в input.

Представим что input в состоянии disabled и меняет своё состояние при нажатии на (в данном случае) родителя. Но при этом должен работать и тот код, который влияет на главный чекбокс.

laimas 16.10.2019 13:15

Цитата:

Сообщение от Aruta
событие клика не назначено на родителя второстепенных чекбоксов

И как это понять?

Цитата:

Сообщение от Aruta
блок 1 > input.
click происходит по умолчанию на input, чтобы галка встала.

А надо:
блок 1 > input
click должен быть на блок 1, чтобы галка встала в input.

А это как переварить? Это "click происходит по умолчанию на input, чтобы галка встала" есть глупость, ибо установка и сброс флажка совершается одним и тем же действием, щелчком по нему, то бишь это всегда будет событие click.

Aruta 16.10.2019 14:06

laimas,
.upsale__block__sub-right-wrap - родитель для всех блоков и на него вешается событие клика (show/hide блок) для .upsale__block__bot-right__sub-wrap

второстепенные input должны срабатывать при клике на .floor__item-wrap. Выше не надо подниматься для события click по этому чекбоксу

Получается логика такая:
кликаем на .floor__item-wrap и дочерний для него чекбокс получает/снимает с себя галку, а далее уже работает функция установки и проверки состояния on/off для главного чекбокса.

Чтобы не путаться, то можно сделать второстепенные чекбоксы как disabled (в html хардкодом) и, тогда нужно обработчик клика по чекбоксу перенести на .floor__item-wrap.
Вот именно этот перенос обработчика клика и нужно добавить в ваш код, чтобы всё работало не конфликтуя:)

Порядок (при клике на .floor__item-wrap):
click по .floor__item-wrap -> проверка состояния дочернего input для этого блока -> ставим/снимаем галку в input (if есть галка уже/нет галки) -> проверка на состояние остальных input в оставшихся .floor__item-wrap -> снятие/установка галки в inpit в .upsale__block__bot-right__title-wrap

<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()"> // этот input "главный". stopPropagation() добавлен, чтобы при нажатии на input не срабатывал скрипт click для upsale__block__bot-right__title-wrap			
								<span>
									<img class="arrow arrow-up" src="" alt="arrow_down">
									Choose your floor
								</span>
							</div>
							<div class="col-title__price-wrap dflex">
								<div></div>
								<div></div>
								<div></div>
							</div>
						</div>
						<div class="upsale__block__bot-right__sub-wrap dnone" style="display: block;">
							<div class="montage__content-wrap">
								<span class="montage__text">intro text 
								<div class="montage__floor-wrap montage__comp-wrap dflex">
									<div class="montage__floor dflex">
										<div class="floor__item-wrap">   //на этот блок должен работать click и включать/выключать дочерний второстепенный input
											<div class="floor__item-inner">
												<div class="floor__item">
													<input id="first_floor" type="checkbox" name="groundfloor" value="groundfloor">  //второстепенный input
													<div class="floor__item__img">
														<img src="" alt="">
													</div>
													<span class="floor__item__text">Ground floor</span>
												</div>
											</div>
										</div>      //закрытие блока .floor__item-wrap
										<div class="floor__item-wrap">   //на этот блок должен работать click и включать/выключать дочерний второстепенный input
											<div class="floor__item-inner">
												<div class="floor__item">
													<input id="sec_floor" type="checkbox" name="middlefloor" value="middlefloor">  //второстепенный input
													<div class="floor__item__img">
														<img src="" alt="">
													</div>
													<span class="floor__item__text">Second floor</span>
												</div>
											</div>
										</div>	//закрытие блока .floor__item-wrap
										<div class="floor__item-wrap">   //на этот блок должен работать click и включать/выключать дочерний второстепенный input
											<div class="floor__item-inner">
												<div class="floor__item">
													<input id="third_floor" type="checkbox" name="topfloor" value="topfloor">  //второстепенный input
													<div class="floor__item__img">
														<img src="" alt="">
													</div>
													<span class="floor__item__text">Third floor</span>
												</div>
											</div>
										</div>  //закрытие блока .floor__item-wrap
										<div class="floor__item-wrap">  //на этот блок должен работать click и включать/выключать дочерний второстепенный input
											<div class="floor__item-inner">
												<div class="floor__item">
													<input id="all_floor" type="checkbox" name="apartment" value="apartment"> //второстепенный input
													<div class="floor__item__img">
														<img src="" alt="">
													</div>
													<span class="floor__item__text">Apartment Building</span>
												</div>
											</div>
										</div>  //закрытие блока .floor__item-wrap
									</div>
								</div>
							</div>			
						</div>			
					</div>

laimas 16.10.2019 17:17

Охренеть. Чем в конце концов должен заниматься флажок id="floor":
а) только показывать/скрывать блок?
б) показывать/скрывать блок и выбирать все второстепенные флажки?

Aruta 16.10.2019 17:20

laimas,
Цитата:

Сообщение от laimas
Чем в конце концов должен заниматься флажок id="floor":

только отключать второстепенные флажки и включаться, когда хотя бы один из них включен.

laimas 16.10.2019 18:05

Цитата:

Сообщение от Aruta
только отключать второстепенные флажки

То есть наоборот - выбор этого флажка, это сброс последующих, а выбрать им все последующие нельзя?

Блоков upsale__block__sub-right-wrap на этой странице всегда два?

Aruta 16.10.2019 18:26

Цитата:

Сообщение от laimas
То есть наоборот - выбор этого флажка, это сброс последующих, а выбрать им все последующие нельзя?

Верно

Цитата:

Сообщение от laimas
Блоков upsale__block__sub-right-wrap на этой странице всегда два?

Пока два, т.к. пока хардкод в этой части, но страница динамическая и когда запрограммирую php, то там может быть и более 7 таких блоков.
https://prnt.sc/pk5amz

laimas 16.10.2019 19:02

Ясно.Дело в том, что в первом блоке оказывается есть и другие поля, но типа file, а значит селектор для делегирования нельзя так указывать.


Часовой пояс GMT +3, время: 15:32.