menu
閉じる
  1. Photoshopで文字と文字の行間を変える方法
  2. スタートアップに使える!HTML5とCSSのテンプレート
  3. IF文マスター!各プログラミング言語での、IF文の書き方。
  4. 画面サイズごとにCSSを切り替える!メディアクエリとは?
閉じる
閉じる
  1. PHPで三項演算子「?:」を使うとき
  2. jQueryで、検索する前のオブジェクトに戻る方法
  3. FireFoxでリンクをクリックすると表示される謎の線
  4. IF文マスター!各プログラミング言語での、IF文の書き方。
  5. jQueryで特定のリンクにTargetBlankを付与する方法
  6. ウィンドウサイズによって画像のサイズを変えたい!
  7. スタートアップに使える!HTML5とCSSのテンプレート
  8. jQueryでradio / checkbox / select / …
  9. 「Google Fonts + 日本語 早期アクセス」を使ってみた
  10. 【Access】SQLで値がNULLの時、別の値に置換えるNZ関数
閉じる

なるほど!ちきんぷろぐらまーず

jQueryでradio / checkbox / select / multipleの値を操作する

こんにちは。つくねです。

jQueryでフォームに入力された値を取るときに、戸惑いがちな以下の項目

について、取得と設定の方法を書いてみます。

 

まずは戸惑わない項目から


上記に挙げなかった項目(テキストボックスやテキストエリア)は、だいたい素直に .val() で操作できます。
※対象項目が name=target であるとして進めていきます。

取得

設定

チェックボックスやラジオボタン、セレクトボックスは、ユーザの入力が「値」としてでなく「選択」という要素にあるので、
ここで挙げた方法で操作しようとしても、なかなかうまくいかなかったりします。

では、そんな選択要素の操作方法を、順に記載していきます。

 

チェックボックス(input type=”checkbox”)


チェックボックスは、複数の要素を選択できてしまうため、一番ややこしいかもしれませんが、
ラジオボタンなどにも応用できるので、まずはここから抑えましょう。

取得

取得するときの .val() は、対象項目のうち「先頭の1件」の値を取ってきてしまいます。
選択された値すべてを取得するために、こんなふうにしてみましょう。

:checked をつけることで、選択されたものだけを対象にします(これがないと、選択/未選択関係なく全部を対象にしてしまいます)。
.val() で先頭の値だけにならないように、 .map() でループして各値を取り出します。
また、.map() はjQueryオブジェクトを返すので、.get() で純粋な配列にします。

設定

.val(value) で単独の値(スカラー値)を渡すと、選択の有無ではなく、項目のvalue自体を上書きしてしまいます。しかも、先頭だけでなく全部
選択しているかどうかを変更するためには、配列を渡すようにします。

 

ラジオボタン(input type=”radio”)


続いて、ラジオボタンについてです。

取得

選択されたものだけに絞る :checked だけ気をつければ、選択された値を取得できます。
ただし、選択肢が0件の場合があり得るので要注意です。

いずれかに初期値が設定されていれば、なにも選択されていない状態になることは普通はありませんが、
一応、選択肢0件の場合のチェックも入れておくと安心です。

設定

チェックボックスと同様、.val(value) で単独の値(スカラー値)を渡すと、すべてのvalueを上書きしてしまいます
配列を渡すようにしましょう。
※選択肢が value1 / value2 / value3 / value4 であると思ってください。

 

セレクトボックス(select)


ここでは、単一選択のセレクトボックスについてです。

取得

通常と同じく取得できます。
ただ、こちらも、選択されていない場合があり得ます。

「選択してください」といった選択肢が用意されている場合、その値が選択されていても null や undefined にはならず、
「選択してください」に設定された値になります。

設定

設定する分にも、通常と同じ方法でいけます。
※選択肢が value1 / value2 / value3 / value4 であると思ってください。

 

マルチセレクトボックス(select multiple)


最後に、マルチセレクトボックスについてです。

取得

.val() を使うと、選択された値を配列で取得できます。
ただ、選択されていない場合に注意が必要です。

設定

配列でも、単独の値(スカラー値)でも、どちらも利用できます。

最後に

いかがだったでしょうか。
お役に立つことがあれば幸いです。

関連記事

  1. PHPで三項演算子「?:」を使うとき

  2. jQueryで特定のリンクにTargetBlankを付与する方法…

  3. PHPでエラー『unexpected …』が出たとき…

  4. jQueryで、検索する前のオブジェクトに戻る方法

  5. 【Access】SQLで値がNULLの時、別の値に置換えるNZ関…

  6. IF文マスター!各プログラミング言語での、IF文の書き方。

おすすめ記事

  1. IF文マスター!各プログラミング言語での、IF文の書き方。
  2. スタートアップに使える!HTML5とCSSのテンプレート
  3. Photoshopで文字と文字の行間を変える方法
  4. 画面サイズごとにCSSを切り替える!メディアクエリとは?

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る