Tweet

連載：jQuery逆引きリファレンス 【属性＆コンテンツ編】 フォーム要素の値を取得／設定するには？ − val()／val(val) − 山田 祥寛（http://www.wings.msn.to/） 2009/11/13

　テキストボックスや選択ボックス、ラジオボタンなど、フォーム要素の値を取得／設定するには、valメソッドを使います。

　valメソッドは、引数valを指定した場合には要素セットに含まれる全フォーム要素の値を設定し、引数valを省略した場合には、要素セットに含まれる先頭フォーム要素の値を取得します。

　以下は、あらかじめ用意されたテキストボックス、選択ボックス、リストボックスにそれぞれ値を設定し、その後で、それぞれの値をメッセージ表示する例です。

<script type="text/javascript"> $(function() {   // フォーム要素に値を設定   $('#name').val('ASP.NET');   $('#food').val('orange');   $('#music').val(['jazz', 'classic']);   // フォーム要素の値を取得   window.alert(     'name：' + $('#name').val() + '\n' +     'food：' + $('#food').val() + '\n' +     'music：' + $('#music').val()   ); }); </script> ……中略…… <input type="text" id="name" /> <select id="food">   <option value="apple">りんご</option>   <option value="orange">みかん</option>   <option value="strawberry">いちご</option> </select> <select id="music" multiple="multiple">   <option value="jazz">ジャズ</option>   <option value="rock">ロック</option>   <option value="classic">クラシック</option> </select>

リスト046 フォーム要素の値を取得／設定（Val.html）

このHTMLを実際にブラウザで開く

ブラウザで開く

リスト046の実行結果

　リストボックスのように複数選択可能なフォーム要素では、val(val)メソッドにも配列リテラル（［要素，……］）の形式で値を渡します（リスト046の ）。

　また、val()メソッドも複数の値が選択されている場合には、配列として要素の値を返す点（リスト046の ）に注目してください。

INDEX
	jQuery逆引きリファレンス
	1．セレクタ編
	2．属性＆コンテンツ編
	3．トラバーシング編
	4．要素の操作＆ユーティリティ編
	5．コア編
	6．イベント編
	7．エフェクト編
	8．Ajax編（前編）
	9．Ajax編（後編）
	10．jQuery 1.4編

「jQuery逆引きリファレンス」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード