【jQuery】val()を使ってvalue値の設定/取得を行う!

value値の設定/取得を行うにはjQueryのval()メソッドを使用します。

jQueryのval()とは要素のvalue属性の取得や設定を行うメソッドであり、input要素などで設定されているvalue属性の値を設定したり、取得したい時に使用することができます。

また、返り値を設定することで場合によって要素のvalue値を設定することもできます。

今回は、jQueryのval()メソッドを使ってvalue値の設定/取得を行う方法について以下の内容で解説していきます。

⚫︎ 指定した要素のvalue値を取得する場合
⚫︎ 指定した要素のvalue値を設定する場合
⚫︎ 戻り値を設定してvalue値を設定する場合

⚫︎ jQueryを使用せずに指定した要素のvalue値を設定/取得する方法

ハルトさん

今回はjQueryのval()メソッドで要素のvalue値の設定/取得を行う方法について説明していきます。

さとみさん

はい!
お願いします!

val()とは

val()とは要素のテキストを設定、または設定されているテキストを取得するメソッドとなります。

val()の書き方

val()の書き方は下記となります。

パラメータ

⚫︎ :
value属性に設定したい値を指定する
⚫︎ 関数:
設定したい値を関数の戻り値で指定する

val()メソッドのパラメータに値を指定して呼び出すことで、$の()で指定したセレクターの要素のvalue属性に値を設定することができ、配列にすることで複数の値を設定することができます。
そして、パラメータに関数を指定して呼び出すことで、設定したい値を関数の戻り値として設定することができます。

また、val()メソッドをパラメータ無しで使用することで要素内の文字列を取得することができます。

value値の設定/取得を行うサンプルコード

要素のvalue値の設定/取得を行うサンプルコードを紹介します。

要素のvalue値を取得する場合

要素のvalue値を取得する場合はval()メソッドをパラメータ無しで使用します。

sample.html

index.js

出力結果

val()メソッドによって、指定した要素のvalue値を取得することができます。
そのため、btn1のボタンを押すとinputタグのvalueの値を、btn2のボタンを押すとinputタグのcheckedのあるvalueの値を、btn3のボタンを押すとselectタグのvalueの値を取得しています。

さとみさん

val()メソッドで、指定した要素のvalue値を取得していますね!

ハルトさん

そうですよね。
しかし、val()メソッドをそのまま使うと指定した要素のvalue値を単数で取得しますので複数のvalue値を取得することができません。
もし、複数のvalue値を取得する場合はサンプルコードのようにmap()メソッドと組み合わせましょう。

要素のvalue値を設定する場合

要素のvalue値を設定する場合はval()メソッドのパラメータにを指定します。

sample.html

index.js

出力結果

val()メソッドに値を指定することで、要素のvalue値を設定することができます。
そのため、btn1のボタンを押すとinputタグのcheckboxのvalue値を、btn2のボタンを押すとinputタグのtextのvalue値を、btn3のボタンを押すとselectタグのvalue値を設定しています。

戻り値を設定してvalue値を設定する場合

戻り値を設定してvalue値を設定する場合はval()のパラメータに関数を指定します。

sample.html

index.js

出力結果

val()メソッドのパラメータに関数を指定することで、戻り値を設定してvalue値を設定や取得を行っています。
そのため、切り替えボタンを押すことで設定するvalue値が切り替わっています。

jQueryを使用せずに指定した要素のvalue値の設定/取得を行う方法

jQueryを使用せず純粋なJavaScrioptで指定した要素のvalueの設定や取得を行ってみます。

sample.html

index.js

出力結果

jQueryを使用せずに純粋なJavaScrioptで指定した要素のvalue値の設定や取得を行っています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

今回のポイント

val()で指定したのvalue属性の値を設定/取得

⚫︎ 要素のvalue値の設定/取得を行うにはjQueryのval()メソッドを使用する

⚫︎ val()メソッドのパラメータには値や関数を指定する

⚫︎ 要素のvalue値を取得する場合はval()メソッドをパラメータ無しで使用する

⚫︎ 要素のvalue値を設定する場合はval()メソッドのパラメータにを指定する

⚫︎ 戻り値を指定して要素のvalue値を設定する場合はval()メソッドのパラメータに関数を指定する

関連記事

jQueryのattr()メソッドを使って要素の属性値の取得や設定を行う方法についてはこちらをご参考ください。

jQueryのprop()メソッドを使って要素のプロパティ値の取得や設定を行う方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し