ラジオボタン未選択で全表示する

Question

前提・実現したいこと

タブ切り替え機能があり、その切り替えタブの中にラジオボタンでカテゴリー分けが出来る機能を作りました。
今回実現したい事を簡潔に言うと、
ラジオボタン部分が未選択の場合は、リストタグ部分のコンテンツが全て表示されるようにしたいです。

現状では、例えば
野菜タブクリック → 野菜aクリックで野菜aだけ表示され、野菜b,野菜cは非表示になります。
そしてその状態で続けて、果物タブクリック → 果物aクリックすると、果物タブラジオボタンが未選択の状態にも関わらず、果物aだけが表示され、果物b,果物cが非表示のままです。
この際に、果物b,果物cも表示された状態のままにしておきたいです。

少しややこしいですが、お分かりの方いれば力を貸していただけると嬉しく思います。
よろしくお願いします....

該当のソースコード

  <ul class="tab">
      <li class="active"><a href="#tab1" >すべて表示</a></li><!--タブ切り替えボタン-->
      <li><a href="#tab2">野菜タブ</a></li><!--タブ切り替えボタン-->
      <li><a href="#tab3">果物タブ</a></li><!--タブ切り替えボタン-->
 </ul>


<div class="tabContents active" id="tab1">
 <div class="link-card-wrap">
   <ul class="link-card-list">
<li data-group="a"><a href="single-example1.html">コンテンツa</li>    
<li data-group="b"><a href="single-example1.html">コンテンツa</li>    
<li data-group="c"><a href="single-example1.html">コンテンツa</li>    
     </ul>
</div><!--link-card-wrap-->
</div>


<div class="tabContents active" id="tab2">
<div class="radio-btn-wrap">
<label>
<input class="radio-input is-active" type="radio" name="kind" value="野菜a" data-group="a">野菜a<!--カテゴリーラジオボタン-->
</label>
<label>
<input class="radio-input is-active" type="radio" name="kind" value="野菜b" data-group="a">野菜b<!--カテゴリーラジオボタン-->
</label>
<label>
<input class="radio-input is-active" type="radio" name="kind" value="野菜c" data-group="a">野菜c<!--カテゴリーラジオボタン-->
</label>
</div>

 <div class="link-card-wrap">
   <ul class="link-card-list">
<li data-group="a"><a href="single-example1.html">野菜a</li>    
<li data-group="b"><a href="single-example1.html">野菜b</li>    
<li data-group="c"><a href="single-example1.html">野菜c</li>    
     </ul>
</div><!--link-card-wrap-->
</div>

<div class="tabContents active" id="tab3">
<div class="radio-btn-wrap">
<label>
<input class="radio-input is-active" type="radio" name="kind" value="果物a" data-group="a">果物a<!--カテゴリーラジオボタン-->
</label>
<label>
<input class="radio-input is-active" type="radio" name="kind" value="果物b" data-group="a">果物b<!--カテゴリーラジオボタン-->
</label>
<label>
<input class="radio-input is-active" type="radio" name="kind" value="果物c" data-group="a">果物c<!--カテゴリーラジオボタン-->
</label>
</div>
 <div class="link-card-wrap">
   <ul class="link-card-list">
<li data-group="a"><a href="single-example1.html">果物a</li>    
<li data-group="b"><a href="single-example1.html">果物a</li>    
<li data-group="c"><a href="single-example1.html">果物a</li>    
     </ul>
</div><!--link-card-wrap-->
</div>

タブ切り替え部分

      $(function() {
        $(".tab a").click(function() {
          $(this).parent().addClass("active").siblings(".active").removeClass("active");
          var tabContents = $(this).attr("href");
          $(tabContents).addClass("active").siblings(".active").removeClass("active");
          return false;
        });
      });

ラジオボタン(カテゴリー分け部分) 

    var searchItem = '.radio-input';   // 絞り込む項目を選択するエリア
    var listItem = '.list-item';       // 絞り込み対象のアイテム
    var hideClass = 'is-hide';         // 絞り込み対象外の場合に付与されるclass名
    var activeClass = 'is-active';     // 選択中のグループに付与されるclass名
    
    $(function() {
      // 絞り込みを変更した時
      $(searchItem).on('click', function() {
        $(searchItem).removeClass(activeClass);
        var group = $(this).addClass(activeClass).data('group');
        search_filter(group);
      });
    });

    /**
     * リストの絞り込みを行う
     * @param {String} group data属性の値
     */
    function search_filter(group) {
      // 非表示状態を解除
      $(listItem).removeClass(hideClass);
      // 値が空の場合はすべて表示
      if(group === '') {
        return;
      }
      // リスト内の各アイテムをチェック
      for (var i = 0; i < $(listItem).length; i++) {
        // アイテムに設定している項目を取得
        var itemData = $(listItem).eq(i).data('group');
        // 絞り込み対象かどうかを調べる
        if(itemData !== group) {
          $(listItem).eq(i).addClass(hideClass);
        }
      }
    }

Answer 1

.tabContents:not(.active){display:none;}

としておいて

$(function(){
  $('.tabContents').removeClass('active');
  $('.tab a').on('click',function(){
    $('.tabContents').removeClass('active');
    $($(this).attr('href')).addClass('active');
    $('.radio-input').prop('checked',false);
    $('li[data-group]').show();
  });
  $('[data-group]:radio').on('click',function(){
    var group=$(this).data('group');
    $(this).closest('.tabContents').find('li[data-group]').hide().filter(function(){return $(this).data('group')==group;}).show();
  });
});

Comments

[yambejp]

data-groupのa,b,cはちゃんとつけてください
果物aが3つあるのでa,b,cにしてください

[codemanvs]

できました！！感謝感激です...ありがとうございます...