JavaScript、jQuery、Ajaxで選択されたチェックボックスを配列に取得する3つの方法

2024-04-02

JavaScript、jQuery、Ajax を使って選択されたチェックボックスをすべて配列に取得する方法

前提条件

このチュートリアルを始める前に、以下のものが必要です。

HTML ファイル
JavaScript ファイル
(オプション) jQuery ライブラリ

HTML

まず、HTML ファイルにチェックボックスをいくつか用意します。

<input type="checkbox" name="checkboxes[]" value="1">
<input type="checkbox" name="checkboxes[]" value="2">
<input type="checkbox" name="checkboxes[]" value="3">

name 属性は同じにして、value 属性はそれぞれのチェックボックスに固有の値を設定します。

JavaScript

次に、JavaScript ファイルで選択されたチェックボックスを取得するコードを書きます。

純粋な JavaScript

const checkboxes = document.querySelectorAll('input[type="checkbox"][name="checkboxes[]"]:checked');
const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);

console.log(selectedValues); // ["1", "2", "3"]

このコードは、以下の処理を行います。

querySelectorAll を使って、name 属性が checkboxes[] で、type 属性が checkbox で、かつチェックされているすべてのチェックボックスを取得します。
Array.from を使って、取得したチェックボックスのリストを配列に変換します。
配列内の各チェックボックスの value 属性を取得して、新しい配列に格納します。

jQuery

const $checkboxes = $('input[type="checkbox"][name="checkboxes[]"]:checked');
const selectedValues = $checkboxes.map(function() {
  return $(this).val();
}).get();

console.log(selectedValues); // ["1", "2", "3"]

このコードは、jQuery を使って同様の処理を行います。

$('input[type="checkbox"][name="checkboxes[]"]:checked') を使って、チェックされているすべてのチェックボックスを選択します。
map メソッドを使って、選択されたチェックボックスの各要素に対して val() メソッドを実行し、value 属性を取得します。
get() メソッドを使って、jQuery オブジェクトを配列に変換します。

Ajax を使って、サーバーに選択されたチェックボックスの値を送信することもできます。

const $checkboxes = $('input[type="checkbox"][name="checkboxes[]"]:checked');
const selectedValues = $checkboxes.map(function() {
  return $(this).val();
}).get();

$.ajax({
  url: '/submit-checkboxes',
  method: 'POST',
  data: {
    checkboxes: selectedValues,
  },
});

上記と同じように、選択されたチェックボックスの値を取得します。
$.ajax メソッドを使って、サーバーに POST リクエストを送信します。
data オプションを使って、リクエストデータに checkboxes キーと選択された値の配列を渡します。

このチュートリアルでは、JavaScript、jQuery、Ajax を使って、HTML フォームから選択されたチェックボックスをすべて配列に取得する方法を説明しました。

これらの方法を参考に、ご自身のニーズに合ったコードを作成してください。

補足

このチュートリアルでは、チェックボックスの name 属性が checkboxes[] であることを前提としています。異なる名前を使用している場合は、コードを適宜変更する必要があります。
Ajax を使用する場合は、サーバー側で受け取ったデータ処理するコードも必要です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <h1>選択されたチェックボックスを取得</h1>
  <form>
    <input type="checkbox" name="checkboxes[]" value="1"> チェックボックス 1
    <input type="checkbox" name="checkboxes[]" value="2"> チェックボックス 2
    <input type="checkbox" name="checkboxes[]" value="3"> チェックボックス 3
    <br>
    <button type="button" id="get-selected-checkboxes">選択されたチェックボックスを取得</button>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#get-selected-checkboxes').click(function() {
        // 純粋な JavaScript
        const checkboxes = document.querySelectorAll('input[type="checkbox"][name="checkboxes[]"]:checked');
        const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
        console.log(selectedValues); // ["1", "2", "3"]

        // jQuery
        const $checkboxes = $('input[type="checkbox"][name="checkboxes[]"]:checked');
        const selectedValues = $checkboxes.map(function() {
          return $(this).val();
        }).get();
        console.log(selectedValues); // ["1", "2", "3"]

        // Ajax
        $.ajax({
          url: '/submit-checkboxes',
          method: 'POST',
          data: {
            checkboxes: selectedValues,
          },
        });
      });
    });
  </script>
</body>
</html>

// 上記の HTML ファイルと同じ

サーバー側コードは、使用している言語やフレームワークによって異なります。

例：PHP

<?php

// POST リクエストを受け取る
$checkboxes = $_POST['checkboxes'];

// データベースに保存したり、他の処理を行う

例：Python (Flask)

from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-checkboxes', methods=['POST'])
def submit_checkboxes():
  # POST リクエストを受け取る
  checkboxes = request.form.getlist('checkboxes')

  # データベースに保存したり、他の処理を行う

  return 'OK'

if __name__ == '__main__':
  app.run()

実行

HTML ファイルをブラウザで開きます。
チェックボックスをいくつか選択します。
選択されたチェックボックスを取得 ボタンをクリックします。
コンソールを確認すると、選択されたチェックボックスの値が表示されます。

注意

上記のコードはサンプルです。ご自身の環境に合わせて変更する必要があります。

選択されたチェックボックスを取得する他の方法

for ループを使用する

const checkboxes = document.querySelectorAll('input[type="checkbox"][name="checkboxes[]"]');
const selectedValues = [];

for (const checkbox of checkboxes) {
  if (checkbox.checked) {
    selectedValues.push(checkbox.value);
  }
}

console.log(selectedValues); // ["1", "2", "3"]

このコードは、for ループを使ってすべてのチェックボックスをループ処理し、チェックされているチェックボックスの value 属性を取得します。

const selectedValues = Array.from(document.querySelectorAll('input[type="checkbox"][name="checkboxes[]"]:checked')).map(checkbox => checkbox.value);

console.log(selectedValues); // ["1", "2", "3"]

このコードは、querySelectorAll の :checked 擬似クラスを使用して、チェックされているチェックボックスのみを取得し、map メソッドを使って value 属性を取得します。

filter メソッドを使用する

const checkboxes = document.querySelectorAll('input[type="checkbox"][name="checkboxes[]"]');
const selectedValues = checkboxes.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);

console.log(selectedValues); // ["1", "2", "3"]

ライブラリを使用する

jQuery などのライブラリを使用すると、より簡単に選択されたチェックボックスを取得することができます。

const $checkboxes = $('input[type="checkbox"][name="checkboxes[]"]:checked');
const selectedValues = $checkboxes.map(function() {
  return $(this).val();
}).get();

console.log(selectedValues); // ["1", "2", "3"]