Скрытие элемента по чекбоксу
Добрый день. Есть разметка:
<div class="group"> <div class="field parent"> <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div> <div class="control"><input type="checkbox" id="converter" name="converter" value="1" checked="checked" class="switch"><label class="switch-label" for="converter"></label></div> </div> <div class="field child"> поле 1 </div> <div class="field child"> поле 2 </div> <div class="field parent"> // здесь ещё один тумблер </div> </div> Подскажите, как скрывать и показывать блоки с классом child при изменении вышележащего чекбокса с классом родителя parent. Скрыть всё до следующего элемента с классом parent. Чекбок активен - child - открыто, не активен, то скрыто. |
Нужно на jquery. Пока накидал так:
$('.parent').each(function(i, parent) { $('input.switch', parent).change(function() { console.log( parent ); $(parent).nextUntil('.parent').filter('.child').toggle(this.checked) }).change() }); |
Цитата:
|
Не работает. Чего-то не хватает :cray:
|
Янковиц,
<!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() { var el = $(this).nextUntil('.parent'), checkbox = $(':checkbox',this); checkbox.change(function() { el.toggle(this.checked) }).change() }); }); </script> </head> <body> <div class="group"> <div class="field parent"> <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div> <div class="control"><input type="checkbox" id="converter" name="converter" value="1" checked="checked" class="switch"><label class="switch-label" for="converter"></label></div> </div> <div class="field child"> поле 1 </div> <div class="field child"> поле 2 </div> <div class="field parent"> <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div> <div class="control"><input type="checkbox" id="converter" name="converter" value="1" class="switch"><label class="switch-label" for="converter"></label></div> </div> <div class="field child"> поле 1 </div> <div class="field child"> поле 2 </div> </div> </body> </html> |
Благодарю, как всегда выручили :)
|
Часовой пояс GMT +3, время: 15:19. |