Jquery else не срабатывает

Нужно, чтобы код в блоке else срабатывал, но не могу понять, как должно выглядеть условие для этого.

Почему else не срабатывает? При клике на второй чекбокс открываются блоки которые соответствуют его атрибуту, но когда выбираешь первый, блоки не пропадают.

$('input[data-group]').on('change', function(){
        var group = $(this).attr('data-group');
        if ( $(this).is(':checked') ) {
            $('[data-item-group="'+group+'"').show();
        } 
        else {
            $('[data-item-group="'+group+'"').hide();
        }
    });
.d-none {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" checked name="radio">
<input type="radio" name="radio" data-group="items1">

<div data-item-group="items1" class="d-none">blocks 1</div>
<div data-item-group="items1" class="d-none">blocks 1</div>


Ответы (1 шт):

Автор решения: Grundy

В данном случае else никогда не выполнится, так как для radio обработчик onchange вызывается в случае выбора этого элемента, а значит внутри обработчика $(this).is(':checked') всегда будет возвращать true.

В качестве решения достаточно скрывать все элементы и затем показывать только нужные.

→ Ссылка