jQueryでチェックボックスの value を複数取得するやり方

チェックボックスは他のフォーム部品と違って特殊な点があります。

それは選択状態によってvalue属性の値を複数持てるということ

なのでチェック済みのチェックボックスの値を全て取得したいなら少し工夫が必要です。

ここではそのjQueryでチェックされた値を配列で取得する方法をまとめました。

このページの目次

単体のチェックボックスでのvalue値取得の仕方について
チェックボックスの値を複数取得するコード例
ここまでのまとめ

単体のチェックボックスでのvalue値取得の仕方について

まず複数取得の方法を紹介する前に、単体のチェックボックスの値を取得する方法を紹介します。

普通のフォーム部品だとその部品に対してvalueメソッドを呼び出せばいいだけです。例えばテキストエリアの場合だと次コードみたいな感じで

/** テキストエリアの値を取得 */
var text = $('textarea').val();

1 2	/** テキストエリアの値を取得 */ var text = $('textarea').val();

一方のチェックボックスの場合、ただセレクタを指定するだけだとチェック状態にかかわらず値が返ってきてしまいます。

なのでチェック済みの値を取得するならセレクタに :checked 疑似要素を付けないといけません。

例えば次のような単体のチェックボックスがあるとしましょう。

<input type="checkbox" value="hoge" />Hoge

1	<input type="checkbox" value="hoge" />Hoge

これがチェック済みの場合だけ値を取得するためのコードは次の通り

/** チェックボックスの値を取得 */
var val = $('input[name=hoge]:checked').val();

1 2	/** チェックボックスの値を取得 */ var val = $('input[name=hoge]:checked').val();

普通に input[name=hoge] としてしまうと、チェック状態に関わらずvalue属性値が返ってきてしまうので要注意。必ず input[name=hoge]:checked のように状態まで指定してあげる必要があります。

そしてチェックボックスの場合はさらに厄介なことに複数あります。

なので同じname属性を持つチェックボックスのどれがチェックされているか調べるには少し工夫が必要ですね。そのやり方については次で紹介します。

チェックボックスの値を複数取得するコード例

チェックボックスでチェック済みの値を配列で取得する方法はあまり難しくありません。

コード例を使って説明するなら次の通りです。

まず次のような同じname属性を持つチェックボックスを作成

<label>
  <input type="checkbox" name="hoge" value="1" />リンゴ
</label>
<label>
  <input type="checkbox" name="hoge" value="2" />バナナ
</label>
<label>
  <input type="checkbox" name="hoge" value="3" />オレンジ
</label>

<label>

<input type="checkbox" name="hoge" value="1" />リンゴ

</label>

<label>

<input type="checkbox" name="hoge" value="2" />バナナ

</label>

<label>

<input type="checkbox" name="hoge" value="3" />オレンジ

</label>

チェックボックスをグループ化させるには同じname属性値を持たせればOKです。

ちなみに上コードだとチェックボックスとテキストを label要素で囲んでますが、これはテキスト部分もチェック可能領域にするためです。（詳しくは次記事参照）

参考記事：チェックボックス全体をクリック可能にする簡単テクニック

そして次がチェックボックスのvalue値を複数取得するjQueryコード例

$(function(){
  $('input[name=hoge]').on('change', function(){
    /// チェックされたvalue値を配列として取得
    var vals = $('input[name=hoge]:checked').map(function(){
      return $(this).val();
    }).get();
    console.log(vals);
  });
});

$(function(){

$('input[name=hoge]').on('change', function(){

/// チェックされたvalue値を配列として取得

var vals = $('input[name=hoge]:checked').map(function(){

return $(this).val();

}).get();

console.log(vals);

});

チェックが付いたチェックボックス要素を $('input[name=hoge]:checked') で取得し、後はmapメソッドを使って value属性値の配列として変換しているだけです。

もちろんmapメソッドを使わずとも次みたいにeachメソッドでも同じことはできます。

$(function(){
  $('input[name=hoge]').on('change', function(){
    var vals = [];
    $('input[name=hoge]:checked').each(function(i){
      vals.push($(this).val());
    });
    console.log(vals);
  });
});

$(function(){

$('input[name=hoge]').on('change', function(){

var vals = [];

$('input[name=hoge]:checked').each(function(i){

vals.push($(this).val());

});

console.log(vals);

});

まあコード的にはあんまりスマートじゃないですね・・・余計な変数を増やしたくないなら先ほどのmapメソッドを使う方がコード的にも最適です。

ここまでのまとめ

チェックボックスでのvalue値の複数取得の要点をまとめると次の通り

必ず :checked 疑似要素を使う
普通に input[name=hoge] とすると全チェックボックスが返ってきてしまう。チェック済みの値を取得するならセレクタは input[name=hoge]:checked などとする必要あり
配列取得はmapメソッドが簡単

mapメソッドを使えばスマートに配列で値取得できる。例えば次がそのコード例

JavaScript

var vals = $('input[name=hoge]:checked').map(function(){ return $(this).val(); }).get();

1
2
3

var vals = $('input[name=hoge]:checked').map(function(){
return $(this).val();
}).get();

もちろんeachメソッドを使っても同じことは可能