JavaScript 絞り込み表示の項目を増やす

Question

前提・実現したいこと

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
上の「3. 配列を使ってリスト側に複数の値を設定できるようにする」を参考にして
javascriptで絞り込みの表示を作成しております。

例：
項目１【タイプ】　カットソー　ワンピース　スカート
項目２【色】　赤　黄色　青　緑
項目３【サイズ】　S　M　L

各項目にチェックを入れると商品のリストから該当するものだけが表示されます。
項目１のみがラジオボタンで１つしか選択できないもの、他の項目はチェックボタンでいくつでも選択できるようにしたいです。

発生している問題・エラーメッセージ

JavaScript初心者です。
参考資料は、項目１と項目２しかないため、自力で項目３を増やすことができません。
ご教授のほどよろしくお願いいたします。

該当のソースコード

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() {
    // 非表示状態を解除
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $(searchBox).length; i++) {
        var name = $(searchBox).eq(i).find('input').attr('name');
        // 選択されている項目を取得
        var searchData = get_selected_input_items(name);
        // 選択されている項目がない、またはALLを選択している場合は飛ばす
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        // リスト内の各アイテムをチェック
        for (var j = 0; j < $(listItem).length; j++) {
            // アイテムに設定している項目を取得
            var itemData = get_setting_values_in_item($(listItem).eq(j), name);
            // 絞り込み対象かどうかを調べる
            var check = array_match_check(itemData, searchData);
            if(!check) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

/**
 * inputで選択されている値の一覧を取得する
 * @param  {String} name 対象にするinputのname属性の値
 * @return {Array}       選択されているinputのvalue属性の値
 */
function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}

/**
 * リスト内のアイテムに設定している値の一覧を取得する
 * @param  {Object} target 対象にするアイテムのjQueryオブジェクト
 * @param  {String} data   対象にするアイテムのdata属性の名前
 * @return {Array}         対象にするアイテムのdata属性の値
 */
function get_setting_values_in_item(target, data) {
    var itemData = target.data(data);
    if(!Array.isArray(itemData)) {
        itemData = [itemData];
    }
    return itemData;
}

/**
 * 2つの配列内で一致する文字列があるかどうかを調べる
 * @param  {Array} arr1 調べる配列1
 * @param  {Array} arr2 調べる配列2
 * @return {Boolean}    一致する値があるかどうか
 */
function array_match_check(arr1, arr2) {
    // 絞り込み対象かどうかを調べる
    var arrCheck = false;
    for (var i = 0; i < arr1.length; i++) {
        if(arr2.indexOf(arr1[i]) >= 0) {
            arrCheck = true;
            break;
        }
    }
    return arrCheck;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

具体的に何をどうしたいかもっと明確に例示してください

Answer 1

ソースを見る限り、Javascriptの修正をしなくても、項目３に対応出来ていると思います。
試しに、HTMLを以下のようにしてみて下さい。きっと項目３で絞り込まれると思います。

<form>
	<div class="search-box">
		<span class="search-box_label">種類:</span>
		<input type="radio" name="kind" value="">ALL
		<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="黄色">黄色
	</div>
  
	<div class="search-box">
		<span class="search-box_label">サイズ:</span>
		<input type="checkbox" name="size" value="S">S
		<input type="checkbox" name="size" value="M">M
		<input type="checkbox" name="size" value="L">L
	</div>
</form>

<ul class="list">
	<li class="list_item" data-kind="野菜" data-color="赤色" data-size="S">いちご 種類: 野菜 色: 赤色</li>
	<li class="list_item" data-kind="野菜" data-color="黄色" data-size="S">かぼちゃ 種類: 野菜 色: 黄色</li>
	<li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">キャベツ 種類: 野菜 色: 緑色</li>
	<li class="list_item" data-kind="果物" data-color="赤色" data-size="S">さくらんぼ 種類: 果物 色: 赤色</li>
	<li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">すいか 種類: 野菜 色: 緑色</li>
	<li class="list_item" data-kind="果物" data-color="緑色" data-size="S">キウイ 種類: 果物 色: 緑色</li>
	<li class="list_item" data-kind="果物" data-color="黄色" data-size="S">バナナ 種類: 果物 色: 黄色</li>
	<li class="list_item" data-kind="野菜" data-color="緑色" data-size="S">メロン 種類: 野菜 色: 緑色</li>
	<li class="list_item" data-kind="果物" data-color="赤色" data-size="M">りんご 種類: 果物 色: 赤色</li>
	<li class="list_item" data-kind="果物" data-color="黄色" data-size="L">レモン 種類: 果物 色:黄色 </li>
</ul>

Comments

[root2]

ご提示いただいたHTMLで問題なく動作しました。
自分でHTMLを変更した時にうまくいかなかったので、JSの変更が必要なのだと思い込んでおりました。
ご教授いただき、誠にありがとうござました！