jQuery｢val｣でフォームや要素のvalue値を取得・設定する

2020年5月5日

jQueryのメソッド「.val() 」は、要素の「valueの値を取得/設定する」事ができるメソッド。

今回は、jQueryで「要素のvalueの値を取得/設定する」メソッド「.val()」について、その使い方をサンプルを交えて解説しよう。

value属性が使える要素

ちなみに、.val()で「要素のvalue値を取得できる」という事だが、「value属性」は全ての要素で使えるわけではない。では、「value」が使える要素にはどんなものがあるだろうか？

input
button
option
olタグのli
data
meter
progress

このように一般的なフォームタグだけではなく、olのliタグやprogressタグなどにも「value属性」は使われるので覚えておこう。

.val()の構文

.val()ではvalueの値を「取得」と「設定」ができる。また、「関数を使って値を設定する」事もできるので、順番に解説していこう。

value値を取得する構文

.val()でvalue値を取得する構文

$("セレクタ").val();

セレクタで指定した要素に対して.val()と記述した場合は、そのvalue値を取得できる。

「取得」した値を、後で使う場合は、次のように変数に格納する方法がある。

var hoge = $("input").val();

value値を設定する構文

.val()でvalue値を設定する構文

$("セレクタ").val("値");

value値を設定（変更）したい要素を「セレクタ」で指定し、.val()のパラメータに「設定する値」を指定する事で、指定要素の「value値」を設定（変更）する事ができる。

value値を関数を使って設定する構文

.val()でvalue値を関数を使って設定する構文

$("セレクタ").val(function(インデックス,現在のvalue値){
  return 関数の内容;
});

.val()でvalue値を設定する際に関数を使う事ができる。

.val()の引数にfunction(インデックス,現在のvalue値){ return 関数の内容; }のように関数を設置するのだが、関数の第１引数にインデックス、第２引数に現在のvalue値を設定する事ができる。

「インデックス」とは、「0から始まる連番」であり、指定要素が複数ある場合に、その順番を取得する事ができるのだ。

例えば$("input").val(function(index,oldValue)とした場合、indexには0から順番に数字が格納され、oldValueには「現時点のvalue値」が格納されるのだ。

jQueryで.val()を使ってvalue値を取得して、その値を表示する例

まずは、ボタンをクリックしたら、テキストフォームのinputタグのvalue値を取得して、その値を「テキスト」として表示する例で見ていこう。

jQuery

$(function(){
  $("button").on("click",function(){
     var getval = $(".target").val();
     $(".set").text(getval);
  });
});

HTML （jQuery反映前）

<button>ボタン</button>
<input class="target" type="text" value="ほげ">
<div> あなたが入力した文字は<span class="set"></span>です。 </div>

HTML （jQuery反映後）

<button>ボタン</button>
<input class="target" type="text" value="ほげ">
<div> あなたが入力した文字は<span class="set">ほげ</span>です。 </div>

このように書く事で、ボタンを押した時に$(".target")の「value値」を、一旦変数getvalに格納した上で、$(".set")のテキストにほげに変更することができる。

この場合inputのフォームに「別の値を入力」してからボタンをクリックすると、もちろん「その入力した値」がテキストして表示される。

jQueryで.val()を使って、value値を設定する例

.val()を使って、value値を設定する例として、ボタンを押したら、inputのテキストフォームの「value値」を設定する例で見ていこう。

jQuery

$(function(){
  $("button").on("click",function(){
     $(".set").val("ふが");
  });
});

HTML （jQuery反映前）

<button>ボタン</button>
<input class="set" type="text" value="">

HTML （jQuery反映後）

<button>ボタン</button>
<input class="set" type="text" value="ふが">

このように書く事で、inputフォームの$(".set")の「value値」をにふがに設定する事ができる！

jQueryで.val()でvalue値を「関数を使って」設定する例

.val()を使って、value値を設定する例として、ボタンを押したら、inputのテキストフォームの「value値」を設定する例で見ていこう。

See the Pen
val() by stand4u (@stand4u)
on CodePen.

このコードを順番に解説していこう。

jQuery

$(function(){
  $("button").on("click",function(){
	$(".target input").val(function(index,oldValue){
		return oldValue * 10 + index;
	});
  });
});

HTML （jQuery反映前）

<button>ボタン</button>
<div class="target">
	<input type="text" value="1">
	<input type="text" value="2">
	<input type="text" value="3">
</div>

HTML （jQuery反映後）

<button>ボタン</button>
<div class="target">
	<input type="text" value="10">
	<input type="text" value="21">
	<input type="text" value="32">
</div>

このように書く事で「3つのinputフォームのそれぞれのvalue」に「関数で指定した内容」の値を順番に設定していく事ができる。

今回の場合function(index,oldValue){});としているので、indexにはinputの0から始まる順番が入り、oldValueには現時点のそれぞれのvalue値が入る。

関数の戻り値としてreturn oldValue * 10 + index;と指定しているので、

最初のinputにはindexには0 、oldValueには1が格納されているので、1 * 10 + 0という式になり、答えとして10がvalue値に設定される。

同様に２番目のinputには2 * 10 + 1で21が設定され、3番目のinputには3 * 10 + 2で32が設定される事になるという事だ。

以上、jQueryで「.val()を使って、value値を取得/設定する」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント