Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Появление/скрытие блока управлением checkbox (https://javascript.ru/forum/jquery/71745-poyavlenie-skrytie-bloka-upravleniem-checkbox.html)

MC-XOBAHCK 09.12.2017 19:25

Появление/скрытие блока управлением checkbox
 
Здравствуйте!
Помогите, простейшая задача (но не для меня) - нужно при включении чекбокса показывать блок, а при выключении скрывать.
Всё что я смог - это только запустить появление блока.

Вот код. В проблемной строчке скрипта я поставил вопросы:
<style>
    #block1 {display:none; height: 50px; width: 50px;background:green;}
    #block2 {display:none; height: 50px; width: 50px;background:green;}
</style>


<input type="checkbox" id="my1"><label for="my1">Включить 1</label>
<div class="skat" id="block1"></div>

<input type="checkbox" id="my2"><label for="my2">Включить 2</label>
<div class="skat" id="block2"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#my1').click(function(){
    if ($(this)??????????) {
        $('#block1').fadeOut();
    } else {
        $('#block1').fadeIn(); 
    }
});

$('#my2').click(function(){
    if ($(this)??????????) {
        $('#block2').fadeOut();
    } else {
        $('#block2').fadeIn(); 
    }
});
</script>

рони 09.12.2017 19:38

MC-XOBAHCK,
:-?
<style>
    .skat {display:none; height: 50px; width: 50px;background:green;}
    :checked + label + div {
      display: block;
    }

</style>


<input type="checkbox" id="my1"><label for="my1">Включить 1</label>
<div class="skat" id="block1"></div>

<input type="checkbox" id="my2"><label for="my2">Включить 2</label>
<div class="skat" id="block2"></div>

MC-XOBAHCK 09.12.2017 20:01

Спасибо вам рони!
Добавил стиль и удалил скрипт - работает как надо.
Вспомнил что это правило подходит только если блок находится сразу после чек-бокса. Я вчера из за этого структуру в хтмл поменял и каждый блок после его чекбокса поставил, а про стили забыл и чёта меня потянуло к скриптам.
Спасибо!


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