val()
val()は入力フォームの値を取得/変更できるメソッドです。
val()
input要素やtextarea要素、select要素などに対して適応するとその入力フォームの値が取得できます。
<!--input要素-->
<input type="text" value="value01">
<!--textarea要素-->
<textarea>value02</textarea>
<!--select要素-->
<select>
<option value="value01">value01</option>
<option value="value02">value02</option>
<option value="value03" selected>value03</option>
</select>console.log( $("input[type=text]").val() );//value01
console.log( $("textarea").val() );//value02
console.log( $("select").val() );//value03select要素のmultiple属性が有効な場合は値を配列で返します。
<select multiple>
<option value="value01" selected>value01</option>
<option value="value02">value02</option>
<option value="value03" selected>value03</option>
</select>console.log( $("select").val() );//[value01,value03]また、チェックボックスやラジオボタンでは:checkedセレクタを利用すると現在選択されている値が取得できます。
<!--ラジオボタン-->
<input type="radio" name="myRadio" value="radio01">
<input type="radio" name="myRadio" value="radio02" checked>
<input type="radio" name="myRadio" value="radio03">
<!--チェックボックス-->
<input type="checkbox" name="myCheckbox" value="checkbox01">
<input type="checkbox" name="myCheckbox" value="checkbox02">
<input type="checkbox" name="myCheckbox" value="checkbox03" checked>console.log( $('input[type=checkbox]:checked').val() ); //checkbox03
console.log( $('input[type=radio]:checked').val() ); //radio02val( value )
val()の引数に値を指定することで、入力フォームの値を変更することができます。次のサンプルではボタンがクリックされた際に入力フォームに「fooo!!」という値を設定しています。
<input type="text" value="">
<button>click</button>$("button").click(function(){
$("input").val("fooo!!");
});val( function )
val()の引数に関数オブジェクトを指定することで、入力フォームの値をより高度に変更することができます。関数オブジェクトは第1引数にindex番号、第2引数に元の値が入っているのでそれらを元に変更した値を return すると、フォームにその値が格納されます。
以下のサンプルではボタンをクリックすると入力フォームの値がそれぞれ AA → 0[AA] 、BB → 1[BB] に変更されます。
<input type="text" value="AA">
<input type="text" value="BB">
<button>click</button>$("button").click(function(){
$("input").val(function(index,value){
return index+"["+value+"]";
});
});val()はjQuery 1.0で定義されたメソッドです。
jQuery 1.4.0での追加/変更val( function )はjQuery 1.4で追加された機能です。
参考URL
登録日 : 2012年11月07日 最終更新日 : 2015年10月12日