Форум

Янковиц · #1 (**permalink**) 13.04.2018, 19:11

Есть сложная разметка:

<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. Прошу помощи у знатоков.

рони · #2 (**permalink**) 13.04.2018, 20:09

Янковиц,
строка 15 и 22 ???

Сообщение от Янковиц

сразу после измененного чекбокса и в которых есть блок с классом children.

Янковиц · #3 (**permalink**) 13.04.2018, 20:52

Строка 10 и 15, должны скрываться, а 22 - остается

рони · #4 (**permalink**) 13.04.2018, 20:53

Янковиц,
чем строка 22 отличается от строк 10 и 15?

j0hnik · #5 (**permalink**) 13.04.2018, 23:00

рони,
ID разные, их и указывать

рони · #6 (**permalink**) 13.04.2018, 23:13

Сообщение от j0hnik

ID разные, их и указывать

не осилил ваше замечание.

j0hnik · #7 (**permalink**) 13.04.2018, 23:15

Сообщение от рони

чем строка 22 отличается от строк 10 и 15?

id="customize-control-2"
id="customize-control-445"
id="customize-control-23"

рони · #8 (**permalink**) 13.04.2018, 23:17

j0hnik,
это у вас юмор такой?

j0hnik · #9 (**permalink**) 13.04.2018, 23:32

рони,
нет, какие еще варианты при такой верстке????

j0hnik · #10 (**permalink**) 13.04.2018, 23:36

<!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>

Форум

Справочник

Discord чат

Курсы javascript