Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2019, 12:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,213

Aruta, как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('.upsale__block__sub-right-wrap :checkbox').click(function(){
		if (this.id=='floor') {
			this.checked=false;
			this.disabled=true;
			$(this).parents('.upsale__block__sub-right-wrap').find('.floor__item :checkbox').prop('checked',false);
			return;
		};
		if (this.name=='groundfloor') {
			if (this.checked) {
				$('#floor').prop({
					'disabled': false,
					'checked': true
				});
				return;
			};
			var o=$(this).parents('.upsale__block__sub-right-wrap').find('.floor__item :checked');
			if (o.length==0) {
				$('#floor').prop({
					'disabled': true,
					'checked': false
				});
			};
		};
	});
});
</script>
</head>
<body>
<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" />								
		</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>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2019, 14:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aruta
$input = $(this).children('.floor__item-inner').children('.floor__item').children('input') ;
А зачем, что в '.floor__item-inner' тоже могут быть флажки а не только у '.floor__item'?

В событии изменения (change, а не click) для дочерних флажков нужно брать по фильтру выбранные, и значение length таковых указывать в .prop('checked') для общего флажка. Ну а изменение общего флажка это вообще просто, его состояние флажкам ниже.
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2019, 15:28
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

ksa,
на форуме работает вроде как-то, но в живой проект когда добавил, то вышло, что при выборе нижних чекбоксов верхний не отмечается - как и сейчас у меня, а если вручную ставить галку верхнему, то при снятии он неактивен становится пока не нажмешь f5.

Нашел где исправить чтобы disabled не был input верхним, но всё же это завязано на id, а не на родителей/дочек...

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

laimas, если .floor__item-inner не добавить, то он вообще не ставит галочку - не спускается по dom куда надо
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2019, 15:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,213

Сообщение от Aruta
в живой проект когда добавил, то вышло, что при выборе нижних чекбоксов верхний не отмечается
Значит ты не такой хтмл тут показал...

В моем варианте все завязано на ту структуру которая есть в примере. Если по факту она не такая - можно просто изменить "родительский" селектор.

Последний раз редактировалось ksa, 15.10.2019 в 15:56.
Ответить с цитированием
  #7 (permalink)  
Старый 15.10.2019, 15:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<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" />                            
        </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');
    if(chk.eq(0)[0]==this) chk.slice(1).prop('checked', this.checked);
    else chk.eq(0).prop('checked', chk.slice(1).filter(':checked').length);
})
</script>
Ответить с цитированием
  #8 (permalink)  
Старый 15.10.2019, 15:59
Аспирант
Отправить личное сообщение для Aruta Посмотреть профиль Найти все сообщения от Aruta
 
Регистрация: 08.07.2019
Сообщений: 85

laimas,
да вроде тот.

Вот вообще весь код без обрезания

<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()"/>					
								<span>
									<img class="arrow arrow_down" src="http://test.vhost78896.cpsite.ru/catalog/view/theme/myown/image/arrowselect.png" alt="arrow_down"/>
									Choose your floor
								</span>
							</div>
							<div class="col-title__price-wrap dflex">
								<div class="col-title__quantity-header col-width">Aantal</div>
								<div class="col-title__price col-width" style="white-space:nowrap;">Prijs</div>
								<div class="col-title__total col-title__totalheader col-width">Totaal</div>
							</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_1'); ?></span>
												</div>
											</div>
										</div>
										<div class="floor__item-wrap">
											<div class="floor__item-inner">
												<div class="floor__item">
														<input id="sec_floor" type="checkbox" name="middlefloor" value="middlefloor">
													<div class="floor__item__img">
														<img src="catalog/view/theme/myown/image/floor/middleFloor.svg" alt="">
													</div>
													<span class="floor__item__text"><?php echo $this->language->get('text_floor_2'); ?></span>
												</div>
											</div>
										</div>	
										<div class="floor__item-wrap">
											<div class="floor__item-inner">
												<div class="floor__item">
													<input id="third_floor" type="checkbox" name="topfloor" value="topfloor">
													<div class="floor__item__img">
														<img src="catalog/view/theme/myown/image/floor/topFloor.svg" alt="">
													</div>
													<span class="floor__item__text"><?php echo $this->language->get('text_floor_3'); ?></span>
												</div>
											</div>
										</div>
										<div class="floor__item-wrap">
											<div class="floor__item-inner">
												<div class="floor__item">
														<input id="all_floor" type="checkbox" name="apartment" value="apartment">
													<div class="floor__item__img">
														<img src="catalog/view/theme/myown/image/floor/apartmentBuilding.svg" alt="">
													</div>
													<span class="floor__item__text"><?php echo $this->language->get('text_floor_build'); ?></span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>			
						</div>			
					</div>

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

laimas,
как тут добавить исполняемый код как у вас в посте? Я закину в него всё - css, js, html, чтобы можно было видеть как это всё работает сейчас
Ответить с цитированием
  #10 (permalink)  
Старый 15.10.2019, 16:04
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aruta
Вот вообще весь код без обрезания
Не важно, обработка делегируется общему родителю. Вот только с disabled не понятно, добавляйте сами, для него значением будет инверсия chk.slice(1).filter(':checked').length, а по умолчанию <input id="floor" type="checkbox" class="block__check" disabled /> коли не разрешено пока не выбрано что-то, а по уму при загрузке ничего и не выбрано, если только не было запоминания предыдущих выборов.
Странно, если его сделать недоступным, то выбрать все им можно только в случае когда хотя бы "один из" был выбран. Что так и должно быть?

Последний раз редактировалось laimas, 15.10.2019 в 16:09.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замыливание нескольких 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