jQueryの案件で、チェックボックスの操作で少し躓いたので備忘録です。
よくよく考えれば簡単なことなのですが、忘れないように……。
【jQuery】チェックボックスの値を取り出す方法
HTMLでのコードが次のような場合
|
1 2 3 |
<input type="checkbox" name="q1" value="1">１ <input type="checkbox" name="q1" value="2">２ <input type="checkbox" name="q1" value="3">３ |
どのチェックボックスがクリックされたかの値を取得します。
取得するのはvalueの値です。
jQueryコードは以下
|
1 2 3 4 5 6 7 8 9 10 11 |
//チェックボックスの値を取得 $q1 = $('input:checkbox[name="q1"]:checked'), //チェックボックスの値が空の場合、処理をストップ if($q1.length === 0){ return; } $q1.each(function(){ $(this).val() }); |
チェックボックスの値は配列で取得されます。
なので、エラーチェックをする際には変数に格納して長さを調べると良いです。
チェックボックスなので、チェックをしたすべてのvalue値を取得します。
そのためにはeach文を用いるといいでしょう。
each文でループして、$(this).val()で取得しましょう。
デバッグ時は注意
Chromeのデベロッパーツールを使用してデバッグをすると、
$(this)の部分で起動のIDが出てくるはずです。
（ボタン押してフォーム送信なら、フォームのボタンのID）
一見間違っているように思えますが、きちんと値は取れているので、安心してください。
（ここで参照が間違っていると考えて30分潰しました……）
ちなみによくあるチェックボックスのデザインについては以下の記事を参考にしてください。
関連記事
今回はちょっとしたデザインのお話です。 ラジオボタンやチェックボックスはデフォルトの状態だと少し硬い印象を受けます。 デフォルトのラジオボタン、チェックボックス ちょっとお堅い感じですよね。 デザイン性を高めることは[…]
