記事内にはプロモーションが含まれています

【JavaScript】チェックボックスの判定方法まとめ！複数の値取得やイベント処理

【JavaScript】チェックボックスの判定方法まとめ！複数の値取得やイベント処理 JavaScript

Webサイトのフォーム作成において、ユーザーに複数の選択肢を提示する「チェックボックス」は欠かせない要素です。

「利用規約に同意する」のチェック有無を確認したり、アンケートで「当てはまるものすべて」を選ばせたりと、その用途は多岐にわたります。

しかし、いざJavaScriptで実装しようとすると、「単一の時はどう書くんだっけ？」「複数の値はどうやって配列に入れるの？」と迷ってしまうことも多いのではないでしょうか。

この記事では、JavaScriptを使ったチェックボックスの判定方法について、基本の checked プロパティの使い方から、複数のチェックボックスをループで処理する方法、さらに変更をリアルタイムで検知するイベント処理まで、コピペで使えるサンプルコード付きで徹底解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

単一のチェックボックスが「チェックされているか」を判定する

まずは最も基本的な、1つのチェックボックスがON（選択状態）かOFF（未選択）かを判定する方法です。

これには、HTML要素の checked プロパティを使用します。

id属性を使って判定する基本コード

特定のチェックボックスをピンポイントで判定するには、HTML側で id を指定し、JavaScriptでその要素を取得するのが一般的です。

<label>
  <input type="checkbox" id="agreement"> 利用規約に同意する
</label>
<button id="checkBtn">判定する</button>

<script>
  document.getElementById("checkBtn").addEventListener("click", () => {
    // 1. 要素を取得する
    const checkbox = document.getElementById("agreement");

    // 2. checkedプロパティで判定する
    if (checkbox.checked) {
      console.log("チェックされています（True）");
    } else {
      console.log("チェックされていません（False）");
    }
  });
</script>

document.getElementById("agreement") でチェックボックスの要素を取得します。

取得した要素の .checked プロパティを参照すると、チェックが入っていれば true、入っていなければ false が返されます。

非常にシンプルですが、これが全ての基本となります。

複数のチェックボックスから「選択された値」を取得する

アンケートフォームのように、同じグループ（同じ name 属性）のチェックボックスの中から、選択された項目だけをリストアップしたいケースも頻繁にあります。

この場合、要素をリスト（NodeList）として取得し、ループ処理で一つずつ確認する必要があります。

選択された項目の値を配列（Array）に格納する

現在のモダンなJavaScript開発では、querySelectorAll と Array.from（またはスプレッド構文）を組み合わせるのがスマートな書き方です。

<div id="fruitsParams">
  <label><input type="checkbox" name="fruits" value="apple"> りんご</label>
  <label><input type="checkbox" name="fruits" value="orange"> みかん</label>
  <label><input type="checkbox" name="fruits" value="grape"> ぶどう</label>
</div>
<button id="getValuesBtn">値を取得</button>

<script>
  document.getElementById("getValuesBtn").addEventListener("click", () => {
    // 1. name="fruits" の要素をすべて取得する（チェックされているものだけ取得するセレクタも可能）
    // ここではあえて全取得してからフィルタリングする例を紹介します
    const checkboxes = document.querySelectorAll('input[name="fruits"]');

    // 2. チェックされている要素のvalueだけを抽出して配列にする
    const selectedValues = [];
    checkboxes.forEach((checkbox) => {
      if (checkbox.checked) {
        selectedValues.push(checkbox.value);
      }
    });

    console.log("選択された値:", selectedValues);
  });
</script>

実行結果（りんごとぶどうを選択した場合）

選択された値: ["apple", "grape"]

document.querySelectorAll('input[name="fruits"]') で、指定したname属性を持つ全てのチェックボックスを取得します。

その後、forEach で一つずつ要素を確認し、checked が true のものだけ、その value 値を配列 selectedValues に追加しています。

もっと短く書くテクニック
セレクタで最初から :checked 擬似クラスを使えば、もっと簡潔に書くことも可能です。
// チェックされている要素だけを取得して、mapで値の配列に変換
const checkedList = document.querySelectorAll('input[name="fruits"]:checked');
const values = Array.from(checkedList).map(input => input.value);

チェックボックスの切り替え（変更）をリアルタイムで検知する

ボタンを押した時ではなく、ユーザーがチェックボックスをクリックした瞬間に処理を実行したい場合は、change イベントを使用します。

「同意する」にチェックが入ったら送信ボタンを有効化する、といったUI制御でよく使われます。

changeイベントを使った実装例

<label>
  <input type="checkbox" id="toggleSwitch"> オプションを表示する
</label>

<div id="optionArea" style="display: none; margin-top: 10px; background: #eee; padding: 10px;">
  追加オプションの設定画面です。
</div>

<script>
  const toggleCheckbox = document.getElementById("toggleSwitch");
  const optionArea = document.getElementById("optionArea");

  // changeイベントを監視する
  toggleCheckbox.addEventListener("change", (event) => {
    // event.target.checked で現在の状態を取得できる
    if (event.target.checked) {
      optionArea.style.display = "block"; // 表示
      console.log("ONになりました");
    } else {
      optionArea.style.display = "none";  // 非表示
      console.log("OFFになりました");
    }
  });
</script>

addEventListener("change", ...) を設定することで、チェックの状態が変わるたびに関数が実行されます。

コールバック関数内の event.target は、イベントが発生した要素（ここではチェックボックスそのもの）を指すため、event.target.checked で最新の状態を取得できます。

4. 実践！「すべて選択」ボタンの実装サンプル

ECサイトや管理画面でよく見かける、「すべて選択 / 解除」の機能をJavaScriptで実装してみましょう。

親のチェックボックスの状態に合わせて、子のチェックボックスを一括操作するテクニックです。

親子連動チェックボックスのコード

<label style="font-weight: bold;">
  <input type="checkbox" id="checkAll"> すべて選択
</label>
<hr>
<label><input type="checkbox" name="item" class="child-check"> 商品A</label><br>
<label><input type="checkbox" name="item" class="child-check"> 商品B</label><br>
<label><input type="checkbox" name="item" class="child-check"> 商品C</label>

<script>
  const checkAll = document.getElementById("checkAll");
  const childChecks = document.querySelectorAll(".child-check");

  // 親（すべて選択）が変更された時の処理
  checkAll.addEventListener("change", (e) => {
    const isChecked = e.target.checked;
    
    // 子要素すべてを親と同じ状態にする
    childChecks.forEach((checkbox) => {
      checkbox.checked = isChecked;
    });
  });

  // 子（個別）が変更された時の処理（親の状態を連動させる）
  childChecks.forEach((checkbox) => {
    checkbox.addEventListener("change", () => {
      // 子がすべてチェックされているか確認
      // Array.fromで配列化してeveryメソッドを使用
      const isAllChecked = Array.from(childChecks).every(c => c.checked);
      
      // すべてチェックされていれば親もチェック、そうでなければ外す
      checkAll.checked = isAllChecked;
    });
  });
</script>

このコードには2つの連動ロジックが含まれています。

  1. 親→子: 「すべて選択」が変わった時、その checked 状態をすべての子要素にコピーします。
  2. 子→親: 個別の項目が変わった時、every() メソッドを使って「すべての子がチェックされているか」を確認し、その結果を親のチェックボックスに反映させています。これにより、「手動ですべてチェックしたら、親も自動でチェックされる」という自然な挙動を実現しています。

5. jQueryを使ったチェックボックス判定（補足）

最近は素のJavaScript（Vanilla JS）が主流ですが、既存のプロジェクトなどでjQueryを使う場合もあるでしょう。

jQueryでは .prop() メソッドを使用するのが定石です。

jQueryでの判定・取得コード

// 単一の判定
if ($('#agreement').prop('checked')) {
    console.log('チェックされています');
}

// 複数の値取得
const vals = $('input[name="fruits"]:checked').map(function() {
    return $(this).val();
}).get();

注意点として、古いjQuery（1.6未満）では .attr('checked') が使われていましたが、現在は .prop('checked') を使うのが正しい方法です。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptでのチェックボックスの判定方法について詳しく解説してきました。

なお、JavaScriptのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

JavaScriptのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク