Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.04.2018, 19:11
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Скрытие - показ элементов по чекбоксу
Есть сложная разметка:
<li id="customize-control-12" class="customize-control">
	<div class="parent">
		<div class="onoffswitch">
			<input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value="">
			<label class="onoffswitch-label" for="switch"></label>
		</div>
		<span class="customize-control-title onoffswitch_label">Родитель</span>
	</div>
</li>
<li id="customize-control-2" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>
<li id="customize-control-445" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>


<li id="customize-control-23" class="customize-control">
	<div class="some-class">
		Не должен скрываться
	</div>
</li>



<li id="customize-control-435" class="customize-control">
	<div class="checkbox_switch parent">
		<div class="onoffswitch">
			<input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value="">
			<label class="onoffswitch-label" for="switch"></label>
		</div>
		<span class="customize-control-title onoffswitch_label">Родитель</span>
	</div>
</li>
<li id="customize-control-426" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>


Необходимо скрывать-показывать пункты списка li при клике на чекбокс с классом parent у одного из родителей. Причем пункты списка должны скрываться(показываться) только те, которые находятся сразу после измененного чекбокса и в которых есть блок с классом children. Прошу помощи у знатоков.

Последний раз редактировалось Янковиц, 14.04.2018 в 11:56.
Ответить с цитированием
  #2 (permalink)  
Старый 13.04.2018, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Янковиц,
строка 15 и 22 ???
Сообщение от Янковиц
сразу после измененного чекбокса и в которых есть блок с классом children.
Ответить с цитированием
  #3 (permalink)  
Старый 13.04.2018, 20:52
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Строка 10 и 15, должны скрываться, а 22 - остается
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2018, 20:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Янковиц,
чем строка 22 отличается от строк 10 и 15?
Ответить с цитированием
  #5 (permalink)  
Старый 13.04.2018, 23:00
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
ID разные, их и указывать
Ответить с цитированием
  #6 (permalink)  
Старый 13.04.2018, 23:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от j0hnik
ID разные, их и указывать
не осилил ваше замечание.
Ответить с цитированием
  #7 (permalink)  
Старый 13.04.2018, 23:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони
чем строка 22 отличается от строк 10 и 15?
id="customize-control-2"
id="customize-control-445"
id="customize-control-23"
Ответить с цитированием
  #8 (permalink)  
Старый 13.04.2018, 23:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

j0hnik,
это у вас юмор такой?
Ответить с цитированием
  #9 (permalink)  
Старый 13.04.2018, 23:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
нет, какие еще варианты при такой верстке????
Ответить с цитированием
  #10 (permalink)  
Старый 13.04.2018, 23:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<li id="customize-control-12" class="customize-control">
	<div class="parent">
		<div class="onoffswitch">
			<input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value="">
			<label class="onoffswitch-label" for="switch"></label>
		</div>
		<span class="customize-control-title onoffswitch_label">Родитель</span>
	</div>
</li>
<li id="customize-control-2" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>
<li id="customize-control-445" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>


<li id="customize-control-23" class="customize-control">
	<div class="children">
		Не должен скрываться
	</div>
</li>



<li id="customize-control-435" class="customize-control">
	<div class="checkbox_switch parent">
		<div class="onoffswitch">
			<input type="checkbox" id="switch" name="switch" class="onoffswitch-checkbox" value="">
			<label class="onoffswitch-label" for="switch"></label>
		</div>
		<span class="customize-control-title onoffswitch_label">Родитель</span>
	</div>
</li>
<li id="customize-control-426" class="customize-control">
	<div class="children">
		Дочка (должен скрываться)
	</div>
</li>

	<script>

document.querySelectorAll('input').forEach((el,i)=>el.onchange = function(){
if(i == 0) document.querySelectorAll('#customize-control-2, #customize-control-445').forEach(li=>li.style.display = this.checked?'none':'list-item');
if(i == 1) document.querySelector('#customize-control-426').style.display = this.checked?'none':'list-item';
});


	</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрытие - показ элементов Янковиц Элементы интерфейса 2 18.12.2017 12:43
Как реализовать скрытие определённых элементов при клике на один из них tupoimudak2 Элементы интерфейса 10 17.06.2017 11:39
скрытие и показ блоков folkemon Общие вопросы Javascript 1 02.12.2016 09:06
скрытие и показ блоков folkemon Общие вопросы Javascript 1 02.12.2016 08:59
Скрытие элементов на JS alex_89 Элементы интерфейса 5 12.05.2011 09:29