【絞込機能】子要素が空の時、親要素を非表示にする

Question

前提・実現したいこと

初学者です。
radioボタンがクリックされた時に、要素を持っていないcheckboxボタンを非表示にしたいです。
よろしくお願いします。

該当のソースコード

    <form>
        <div class="search-box">
            <span class="search-box_label">種類:</span>
            <input type="radio" name="kind" value="野菜">野菜
            <input type="radio" name="kind" value="果物">果物
        </div>
    
        <div class="search-box">
            <span class="search-box_label">色:</span>
            <input type="checkbox" name="color" value="白色">白色
            <input type="checkbox" name="color" value="赤色">赤色
            <input type="checkbox" name="color" value="緑色">緑色
            <input type="checkbox" name="color" value="黄色">黄色
            <input type="checkbox" name="color" value="紫色">紫色
        </div>
    </form>
    
    <ul class="list">
        <li class="list_item" data-kind="果物" data-color="赤色">苺 種類: 果物 色: 赤色</li>
        <li class="list_item" data-kind="野菜" data-color="黄色">かぼちゃ 種類: 野菜 色: 黄色</li>
        <li class="list_item" data-kind="野菜" data-color="緑色">キャベツ 種類: 野菜 色: 緑色</li>
        <li class="list_item" data-kind="果物" data-color="赤色">さくらんぼ 種類: 果物 色: 赤色</li>
        <li class="list_item" data-kind="野菜" data-color="緑色">すいか 種類: 野菜 色: 緑色</li>
        <li class="list_item" data-kind="野菜" data-color="紫色">茄子 種類: 野菜 色:紫色 </li>
        <li class="list_item" data-kind="果物" data-color="緑色">キウイ 種類: 果物 色: 緑色</li>
        <li class="list_item" data-kind="果物" data-color="黄色">バナナ 種類: 果物 色: 黄色</li>
        <li class="list_item" data-kind="果物" data-color="白色">梨 種類: 果物 色: 白色</li>
        <li class="list_item" data-kind="野菜" data-color="緑色">メロン 種類: 野菜 色: 緑色</li>
        <li class="list_item" data-kind="果物" data-color="赤色">りんご 種類: 果物 色: 赤色</li>
        <li class="list_item" data-kind="果物" data-color="黄色">レモン 種類: 果物 色:黄色 </li>
    </ul>

.search-box_label {
  font-weight: bold;
}
.is-hide {
  display: none;
}

$(function() {
  $(".label").click(function() {
    $(".list li").removeClass("list_toggle");
  });
  if ($(".list li").hasClass("list_toggle")) {
    $(".reset .reset-button").click(function() {
      $(".list li").addClass("list_toggle");
    });
  }
});

$(function () {
    $('input[type=radio]').click(function () {
        if ($(this).prop('checked')) {
            $(".list li").removeClass("list_toggle");
        } else {
            $(".list li").addClass("list_toggle");
        }
    });
});

var searchBox = ".search-box"; // 絞り込む項目を選択するエリア
var listItem = ".list_item"; // 絞り込み対象のアイテム
var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名

$(function() {
  // 絞り込み項目を変更した時
  $(document).on("change", searchBox + " input", function() {
    search_filter();
  });
});

/**
 * リストの絞り込みを行う
 */
function search_filter() {
    // リスト内の各アイテムをチェック
    let noCheckItem = true; // 何れもチェックされていないかチェック
    for (let j = 0; j < $(listItem).length; j++) { // リストアイテムの数より小さい間
        let hitItem = true; // 検索対象 
        for (let i = 0; i < $(searchBox).length; i++) {
            let name = $(searchBox)
                .eq(i)
                .find("input")
                .attr("name");
            // 選択されている項目を取得
            let searchData = get_selected_input_items(name);
            // 選択されている項目がない、またはALLを選択している場合は飛ばす
            if (searchData.length === 0 || searchData[0] === "") {
                hitItem &= true; // 何もチェックされていなかったら検索絞込から外す
                continue;
            }
            noCheckItem = false; // 何れかチェックされている
            // アイテムに設定している項目を取得
            let itemData = $(listItem)
                .eq(j)
                .data(name);
            // 絞り込み対象かどうかを調べる
            hitItem &= (searchData.indexOf(itemData) !== -1)
        }

// 各labelをand条件に設定する
        if (hitItem && !noCheckItem) {
            $(listItem)
                .eq(j)
                .removeClass(hideClass);
        } else {
            $(listItem)
                .eq(j)
                .addClass(hideClass);
        }
    }
}

function get_selected_input_items(name) {
  var searchData = [];
  $("[name=" + name + "]:checked").each(function() {
    searchData.push($(this).val());
  });
  return searchData;
}

試したこと

下記を書いてみたところ、正しく動作しませんでした。

$(function(){
  $('input[type=radio]').click(function(){
    if($('input[type=checkbox]').prop("checked")){
      $(".list li").removeClass("list_toggle");
    }else{
      $(".list li").addClass("list_toggle");
    }
  });
});

補足情報

下記サイトを引用しました
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

Answer 1

確認ですが、リストではなく、「チェックボックスを非表示」にしたいのですか？
掲載されているこちらのコードはチェックボックスを非表示にする操作はしていないですね。。。

各行にコメントをつけるとしたらこんな感じかなと思います。

$(function(){
  $('input[type=radio]').click(function(){ // ラジオボタンがクリックされた
    if($('input[type=checkbox]').prop("checked")){ // チェックがついているものが1つ以上あるか？
      $(".list li").removeClass("list_toggle"); // あればリストの要素からlist_toggleクラスを除去
    }else{ // チェックがついているものが一切ない
      $(".list li").addClass("list_toggle"); // なければリストの要素にlist_toggleクラスを追加
    }
  });
});

もし、「選択している種類に存在しない色のチェックボックスを非表示にする（例えば野菜の場合、白色と赤色がないのでそれらのチェックボックスは非表示にしたい）」という意味であればこんな感じでPGを作るといけそうな気がします。

1. 選択されている種類は何か調べる
2. いったん、チェックボックスを全て非表示にする
3. 選択された種類に該当するリストの要素を全て参照し、data-colorから色情報を取得する
4. 3で取得した色情報と一致するチェックボックスを表示する

実際にコードにするとこんな感じかと。

$(function() {
    $('input[type=radio]').click(function(){
        // 野菜 or 果物？
        const type = $(this).val()
        // いったん全てを非表示にする
        $(`input[type=checkbox]`).addClass('is-hide')
        // リストを１つずつ参照する
        $('.list li').each(function(idx, elem) {
            if ($(elem).data('kind') !== type) {
                return
            }
            // リストから色情報を取り出す
            const color = $(elem).data('color')
            // 該当するチェックボックス
            $(`input[type=checkbox][value=${color}]`).removeClass('is-hide')
        })
    })
})

このPGで、選択されている種類に存在しない色の「チェックボックス」を非表示にすることはできると思います。

が、おそらくこれだけでは望まれている結果は得られないのではないかと思います。後もう一工夫必要です。
初学者とのことなので、これ以上は一度ご自身で考えてみて、もしわからないようであればまた質問してみてください。

Comments

[taotaol]

丁寧なご回答ありがとうございます。
頂いたヒントをもとに再度考えてみます！