【応用】jQueryで複数選択されたチェックボックスの値を取得する方法

2024-04-02

jQueryでチェックボックスの値を取得する

:checked セレクタを使う

以下のコードは、name属性がfruitsのチェックボックスのうち、チェックされているもの全てを取得します。

<input type="checkbox" name="fruits" value="apple"> リンゴ
<input type="checkbox" name="fruits" value="banana"> バナナ
<input type="checkbox" name="fruits" value="orange"> オレンジ

// チェックされているチェックボックスを取得
const checkedFruits = $('input[name="fruits"]:checked');

// 各チェックボックスの値を出力
checkedFruits.each(function() {
  console.log($(this).val());
});

prop() メソッドを使う

以下のコードは、id属性がmy-checkboxのチェックボックスの値を取得します。

<input type="checkbox" id="my-checkbox" value="banana"> バナナ

// チェックボックスの値を取得
const fruitValue = $('#my-checkbox').prop('checked');

// 値を出力
console.log(fruitValue);

<input type="checkbox" name="fruits" value="apple"> リンゴ
<input type="checkbox" name="fruits" value="banana"> バナナ
<input type="checkbox" name="fruits" value="orange"> オレンジ

// チェックされているチェックボックスの値を取得
const checkedFruits = $('input[name="fruits"]:checked').val();

// 値を出力
console.log(checkedFruits); // ["apple", "banana"]

複数のチェックボックスの値を取得する

上記の例は、いずれも単一のチェックボックスの値を取得する方法です。複数のチェックボックスの値を取得するには、以下の方法があります。

// チェックされているチェックボックスの値を取得
$('input[name="fruits"]:checked').each(function() {
  console.log($(this).val());
});

// チェックされているチェックボックスの値を取得
const checkedFruits = $('input[name="fruits"]:checked').map(function() {
  return $(this).val();
}).get();

// 値を出力
console.log(checkedFruits); // ["apple", "banana"]

これらの方法を参考に、ご自身の目的に合った方法でチェックボックスの値を取得してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの値を取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>チェックボックスの値を取得</h1>
  <form>
    <input type="checkbox" name="fruits" value="apple"> リンゴ
    <input type="checkbox" name="fruits" value="banana"> バナナ
    <input type="checkbox" name="fruits" value="orange"> オレンジ
    <button type="button">送信</button>
  </form>

  <script>
  $(function() {
    // 送信ボタンクリック時
    $('button').click(function() {
      // チェックされているチェックボックスの値を取得
      const checkedFruits = $('input[name="fruits"]:checked').val();

      // 値を出力
      console.log(checkedFruits); // ["apple", "banana"]
    });
  });
  </script>
</body>
</html>

上記コードをHTMLファイルに保存し、ブラウザで開きます。チェックボックスをいくつか選択し、送信ボタンをクリックすると、選択したチェックボックスの値がコンソールに出力されます。

ポイント

上記コードでは、jQueryライブラリを使用しています。
:checkedセレクタを使用して、チェックされているチェックボックスのみを取得しています。
val()メソッドを使用して、チェックボックスの値を取得しています。

上記のサンプルコード以外にも、チェックボックスの値を取得する方法はいくつかあります。詳しくは、以下の参考資料を参照してください。

チェックボックスの値を取得するその他の方法

<input type="checkbox" id="my-checkbox" value="banana"> バナナ

// チェックボックスの値を取得
const fruitValue = $('#my-checkbox').prop('checked');

// 値を出力
console.log(fruitValue); // true

<input type="checkbox" name="fruits" value="apple"> リンゴ
<input type="checkbox" name="fruits" value="banana"> バナナ
<input type="checkbox" name="fruits" value="orange"> オレンジ

// チェックされているチェックボックスを取得
const checkedFruits = $('input[name="fruits"]').is(':checked');

// 値を出力
console.log(checkedFruits); // [true, true, false]

<input type="checkbox" name="fruits" value="apple"> リンゴ
<input type="checkbox" name="fruits" value="banana"> バナナ
<input type="checkbox" name="fruits" value="orange"> オレンジ

// チェックされているチェックボックスの値を取得
const checkedFruits = [];
$('input[name="fruits"]').each(function() {
  if ($(this).is(':checked')) {
    checkedFruits.push($(this).val());
  }
});

// 値を出力
console.log(checkedFruits); // ["apple", "banana"]

<input type="checkbox" name="fruits" value="apple"> リンゴ
<input type="checkbox" name="fruits" value="banana"> バナナ
<input type="checkbox" name="fruits" value="orange"> オレンジ

// チェックされているチェックボックスの値を取得
const checkedFruits = $('input[name="fruits"]').map(function() {
  if ($(this).is(':checked')) {
    return $(this).val();
  }
}).get();

// 値を出力
console.log(checkedFruits); // ["apple", "banana"]