【jQuery】チェックボックスの値を取り出す方法について【備忘録】

  • 2021年4月1日
  • 2021年4月8日
  • jQuery

jQueryの案件で、チェックボックスの操作で少し躓いたので備忘録です。
よくよく考えれば簡単なことなのですが、忘れないように……。

【jQuery】チェックボックスの値を取り出す方法

HTMLでのコードが次のような場合

どのチェックボックスがクリックされたかの値を取得します。
取得するのはvalueの値です。
jQueryコードは以下

チェックボックスの値は配列で取得されます。
なので、エラーチェックをする際には変数に格納して長さを調べると良いです。

チェックボックスなので、チェックをしたすべてのvalue値を取得します。
そのためにはeach文を用いるといいでしょう。
each文でループして、$(this).val()で取得しましょう。

デバッグ時は注意

Chromeのデベロッパーツールを使用してデバッグをすると、
$(this)の部分で起動のIDが出てくるはずです。
(ボタン押してフォーム送信なら、フォームのボタンのID)

一見間違っているように思えますが、きちんと値は取れているので、安心してください。
(ここで参照が間違っていると考えて30分潰しました……)

ちなみによくあるチェックボックスのデザインについては以下の記事を参考にしてください。

関連記事

今回はちょっとしたデザインのお話です。 ラジオボタンやチェックボックスはデフォルトの状態だと少し硬い印象を受けます。 デフォルトのラジオボタン、チェックボックス ちょっとお堅い感じですよね。 デザイン性を高めることは[…]