jQueryでcheckboxを扱う

jQueryでcheckboxを扱う時にハマったポイントがあったので、備忘録です。

ハマったポイント

フォーム要素の中に以下のようなチェックボックスがあったとします。

<div id="target">
<input type="checkbox” value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>

チェックされた要素のvalueに対して、何らかの処理をしたかったので、以下のように記述しました。

var list = $('#target input:checked');
for(var i=0; i<list.length; i++){
  var v = list[i].val();
  // 何らかの処理
}

が、エラーとなってしまいました。
エラーメッセージは「TypeError: Object # has no method 'val'」

なるほど。
list[i]によって取得できる要素はjQueryオブジェクトではなく、HTMLのInput要素のようです。

試しに上記の変数"list"をconsole.logで出力してみると、

[input, input, input, prevObject: b.fn.b.init[1], context: document, selector: "#target input:checked", jquery: "1.9.1", constructor: function…]
0: input
1: input
2: input
context: document
length: 3
prevObject: b.fn.b.init[1]
selector: "#target input:checked"
__proto__: Object[0]

となっていました。

勘違いしていたポイントはここでした。
jQueryのセレクタで複数の要素がマッチした場合、

[jQueryObj, jQueryObj, jQueryObj]

のようにjQueryオブジェクトの配列で返ってくると思っていたのですが、そうではなく、1個のjQueryオブジェクトの中に、他のプロパティと共に、マッチしたHTML要素が返ってくるということなんですね。

ではそれを踏まえて、どのようにvalueを取得すれば良いかを考えてみます。

方法その１

まずは、返り値がHTML要素であることを前提にした方法です。

var list = $('#target input:checked');
for(var i=0; i<list.length; i++){
  var v = list[i].value
  // 何らかの処理
}

input要素のvalueプロパティにて値を取得します。

方法その２

次に、jQueryのeachメソッドを使う方法です。
以下のブログ記事を参考にさせて頂きました。
jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法

var list = $('#target input:checked');
list.each(funciton(){
  var v = $(this).val();
  // vに対してやりたい処理
})

.each()メソッドはjQueryオブジェクト内のDOM要素に対して繰り返し処理を行なうので、他のプロパティは無視されるわけですね。

方法その３

ちなみに上記ではthisをjQueryオブジェクトとして括っていますが、.each()メソッド内でthisは各HTML要素を参照するので、以下のようにも書けます。

var list = $('#target input:checked');
list.each(funciton(){
  var v = this.value;
  // vに対してやりたい処理
})

おまけ

jQueryの日本語ドキュメントに面白いことが書いてありました。
.each() - jQuery API Documentation 日本語訳

Note: jQueryオブジェクトを返すほとんどのjQueryメソッドは、 jQueryオブジェクト内の各要素に対して繰り返し処理、つまり暗黙のうちに実行される繰り返し処理を 行っています。これが実行される場合は、次のように.each()メソッドで 明示的な繰り返し処理は不要です。

jQueryは非常に便利な反面、何を扱っているかよく分からないままこなせてしまうので、つまづいた時に少しずつでも確認していきたいです(・∀・)！