JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】複数のチェックボックスの条件に応じて配列をフィルタリングする方法

Webアプリケーション開発では、ユーザーが選択したチェックボックスの条件に応じて、配列のデータを動的に絞り込みたい場面がよくあります。本記事では、JavaScriptのfilter()メソッドを使って、複数のチェックボックス条件で配列をフィルタリングする方法を、実際に動作するサンプルコードとともに解説します。

実装のポイント

  • querySelectorAll()でページ内のすべてのチェックボックス要素を取得する
  • 各チェックボックスのcheckedプロパティとインデックスを確認し、対応する条件でfilter()を実行する
  • チェックボックスのonclickイベントからフィルタリング関数を呼び出す

コード例

以下は、複数のチェックボックスの条件に応じて配列をフィルタリングする完全なサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>複数のチェックボックス条件で配列をフィルタリング</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>複数のチェックボックス条件で配列をフィルタリング</h1>
<div class="sample">[22,10,50,30,90,33,80,75,33,99,150,105]</div>
<div class="result"></div>
<br />
<input type="checkbox" class="check" onclick="filterArr()" />数値が50より大きい<br />
<input type="checkbox" class="check" onclick="filterArr()" />数値が5で割り切れる<br />
<input type="checkbox" class="check" onclick="filterArr()" />数値が3で割り切れる<br />
<h3>上のチェックボックスにチェックを入れると、配列にフィルターが適用されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let checkEle = document.querySelectorAll(".check");
    let arr = [22, 10, 50, 30, 90, 33, 80, 75, 33, 99, 150, 105];
    let resArr = arr;
    function filterArr() {
        checkEle.forEach((item, index) => {
            if (item.checked && index == 0) {
                resArr = resArr.filter((num) => num > 50);
                resEle.innerHTML = resArr;
            }
            else if (item.checked && index == 1) {
                resArr = resArr.filter((num) => num % 5 == 0);
                resEle.innerHTML = resArr;
            }
            else if (item.checked && index == 2)
            resArr = resArr.filter((num) => num % 3 == 0);
            resEle.innerHTML = resArr;
        });
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、初期状態では元の配列と3つのチェックボックスが次のように表示されます。

【JavaScript】複数のチェックボックスの条件に応じて配列をフィルタリングする方法

チェックボックスにチェックを入れると、選択した条件に合致する数値だけが絞り込まれて表示されます。

【JavaScript】複数のチェックボックスの条件に応じて配列をフィルタリングする方法

コードの解説

  • filterArr()関数：チェックボックスがクリックされるたびに呼び出され、フィルタリング処理を行います。
  • forEach()による走査：すべてのチェックボックスを順に確認し、checkedがtrueかつインデックスに応じて処理を分岐させます。
  • index == 0：「50より大きい数値」のみを残します（num > 50）。
  • index == 1：「5で割り切れる数値」のみを残します（num % 5 == 0）。
  • index == 2：「3で割り切れる数値」のみを残します（num % 3 == 0）。
  • 結果の表示：resEle.innerHTMLへ代入することで、絞り込み後の配列が画面に即座に反映されます。

なお、このサンプルではresArrが直前のフィルタリング結果を引き継ぐ構造になっているため、複数のチェックボックスにチェックを入れると条件が累積的に適用されます。チェックを外しても元の配列には戻らない点に注意しましょう。リセット機能を持たせたい場合は、「フィルターをクリア」ボタンなどを追加し、resArr = [...arr]で元の配列を再代入すると実現できます。

  1. JavaScriptのsplice()メソッドとは？配列の要素追加・削除を実例コードで解説

    JavaScriptにおける配列のスプライシング（splice）とは 配列の「スプライシング」とは、Array.splice()メソッドを使用して、配列に要素を追加したり、配列から要素を削除したりすることを指します。このメソッドは元の配列を直接変更し、削除された要素は新しい配列として返されます。何も削除されなかった場合は空の配列が返ります。 splice()メソッドの基本構文 array.splice(start, deleteCount, item1, item2, ...) start：変更を開始する位置（インデックス番号）。負の値を指定すると配列の末尾から数えた位置になります。 de

  2. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=