概要
jQueryを使用して、選択されたチェックボックスの項目のみをリスト表示する、絞り込み機能を実装する例を紹介します。チェックボックスは２種類（例：ブランド、メーカー）を用意し、アンド検索できるようにします。チェックボックスを未選択の場合は全件表示するようにします。
HTMLの準備
まず、以下のようなHTMLを準備します。
チェックボックスにはbrand-filterとmaker-filterのクラスを設定します。
リストにはブランドとメーカーのパラメーターとしてdata-brandとdata-makerを挿入します。
チェックボックスの値とリストのパラメーターの値は絞り込みたいもので揃えてください。
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h3>ブランド</h3>
<label><input type="checkbox" class="brand-filter" value="brand1"> Brand 1</label>
<label><input type="checkbox" class="brand-filter" value="brand2"> Brand 2</label>
<label><input type="checkbox" class="brand-filter" value="brand3"> Brand 3</label>
<h3>メーカー</h3>
<label><input type="checkbox" class="maker-filter" value="maker1"> Maker 1</label>
<label><input type="checkbox" class="maker-filter" value="maker2"> Maker 2</label>
<label><input type="checkbox" class="maker-filter" value="maker3"> Maker 3</label>
<ul id="item-list">
<li data-brand="brand1" data-maker="maker1">アイテム 1 - Brand 1 - Maker 1</li>
<li data-brand="brand2" data-maker="maker1">アイテム 2 - Brand 2 - Maker 1</li>
<li data-brand="brand3" data-maker="maker2">アイテム 3 - Brand 3 - Maker 2</li>
<li data-brand="brand1" data-maker="maker3">アイテム 4 - Brand 1 - Maker 3</li>
<li data-brand="brand2" data-maker="maker2">アイテム 5 - Brand 2 - Maker 2</li>
</ul>
</body>
</html>
jQueryによる処理の実装
次に、jQueryを準備します。
チェックボックスがチェックされた場合のみ、絞り込みの関数filterItemsが動作するようif文で場合分します。未選択の場合はリストを全件表示するようにします。
絞り込みの関数filterItemsではブランドとメーカーそれぞれのチェックボックスにチェックされている項目の値を取得し、selectedBrandsとselectedMakersに値をpushします。
チェックボックスにチェックした値と該当するリストを抽出し、ブランドとメーカーを論理積（and演算）を用いて掛け合わせ、toggle関数で表示/非表示を切り替えさせるようにします。
function filterItems() {
var selectedBrands = [];
var selectedMakers = [];
$(".brand-filter:checked").each(function () {
selectedBrands.push($(this).val());
});
$(".maker-filter:checked").each(function () {
selectedMakers.push($(this).val());
});
$("#item-list li").each(function () {
var itemBrand = $(this).data("brand");
var itemMaker = $(this).data("maker");
var isBrandMatched = !selectedBrands.length || selectedBrands.includes(itemBrand);
var isMakerMatched = !selectedMakers.length || selectedMakers.includes(itemMaker);
$(this).toggle(isBrandMatched && isMakerMatched);
});
}
$(".brand-filter:checkbox, .maker-filter:checkbox").on("click", function() {
if ($(this).is(":checked")) {
filterItems();
} else {
$(".js-filter-item").show();
}
});
動作確認
上記のHTMLとjQueryを組み合わせた処理を実行すると、チェックボックスにチェックを入れることで、該当するリスト項目が表示されるようになります。以下は、動作確認のために作成したサンプルです。
まとめ
このように、jQueryを選択したチェックボックスの項目のみを表示する絞り込み機能を実装することができます。
複数の項目に対して絞り込みを行いたい場合は、パラメーターを増やすことができます。例えば、色やサイズなどの複数の条件で絞り込んだり、価格帯や在庫状況など、複数のパラメーターを組み合わせて絞り込むことができます。
以上の内容が、お役に立てば幸いです。絞り込み機能を実装して、ユーザーにとってより使いやすいサイトを作りましょう。