Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрытие - показ элементов по чекбоксу (https://javascript.ru/forum/dom-window/73412-skrytie-pokaz-ehlementov-po-chekboksu.html)

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

рони 13.04.2018 20:09
Янковиц,
строка 15 и 22 ???
Цитата:
Сообщение от Янковиц
сразу после измененного чекбокса и в которых есть блок с классом children.

Янковиц 13.04.2018 20:52
Строка 10 и 15, должны скрываться, а 22 - остается

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

j0hnik 13.04.2018 23:00
рони,
ID разные, их и указывать

рони 13.04.2018 23:13
Цитата:
Сообщение от j0hnik
ID разные, их и указывать
не осилил ваше замечание.

j0hnik 13.04.2018 23:15
Цитата:
Сообщение от рони
чем строка 22 отличается от строк 10 и 15?
id="customize-control-2"
id="customize-control-445"
id="customize-control-23"

рони 13.04.2018 23:17
j0hnik,
это у вас юмор такой?

j0hnik 13.04.2018 23:32
рони,
нет, какие еще варианты при такой верстке????

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

j0hnik 13.04.2018 23:40
другой вариант по номеру li в коллекции

рони 13.04.2018 23:47
Цитата:
Сообщение от j0hnik
другой вариант по номеру li в коллекции
не надо гадать, нужно подождать ответа, в чём отличие этого li от остальных, я таких отличий не вижу.

j0hnik 13.04.2018 23:52
работал с тем что есть :write:

Янковиц 14.04.2018 11:57
Прошу прощения, в разметке с одним классом напутал. Li скрывается, если внутри него есть блок с классом children.

рони 14.04.2018 12:03
Янковиц,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".parent").each(function(i, parent) {
      $("input.onoffswitch-checkbox", parent).change(function() {
    $(parent).parent().nextUntil("li:has(.parent)").filter(":has(.children)").toggle(this.checked)
}).change() 

})
});
  </script>
</head>

<body> <ul>


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

</ul>
</body>
</html>

Янковиц 14.04.2018 12:03
Строка 10 и 15 скрываются, так как внутри них есть классы children. Причём вскрытие показ находятся в прямой зависимости от чекбокса, лежащем в ближайшем предыдущим блоке с классом parent.
То же самое, 39 строка в зависимости только от состояния чекбокса 33 строки, и наличия класса parent в 31.
Прошу прощения за сумбур

Янковиц 14.04.2018 12:04
Благодарю !:dance: :thanks:

Янковиц 14.04.2018 12:06
А возможно, чтобы вначале были скрыты, и при активной чекбоксе показывать дочерние?

рони 14.04.2018 12:10
Янковиц,
смотрите пост №15 снова.


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