jQuery API の val( function( index, value ) ) は、value属性の値を関数で設定するメソッド。インデックス番号とvalue属性の現在の値を、関数に引き渡すことができる。１つ目の引数が、インデックス番号。２つ目の引数が、現在のvalue属性値。
記述方法
jQuery( 'セレクター' ) . val( function( インデックス, value属性の現在の値 ) ) {
return value属性の新しい値;
} );
return value属性の新しい値;
} );
「セレクター」に指定した要素のvalue属性の値を、function関数で設定する。その際、「セレクター」に指定した要素の、インデックス番号と、value属性の現在の値を、function関数に引き渡すことができる。
実装例（サンプル）
実装例（サンプル）の動作について
「value属性値変更」ボタンをクリックすると、１つ目のテキスト入力欄を「sample-0」、２つ目のテキスト入力欄を「sample-1」、３つ目のテキスト入力欄を「sample-2」にする。
「value属性値変更」ボタンを再度クリックすると、すべてのテキスト入力欄を「sample」に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample input' ) . val( function( index, oldValue ) {
return oldValue + '-' + index;
} );
},
function() {
jQuery( '#jquery-sample input' ) . val( 'sample' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample input' ) . val( function( index, oldValue ) {
return oldValue + '-' + index;
} );
},
function() {
jQuery( '#jquery-sample input' ) . val( 'sample' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample input {
margin: 5px;
}
-->
</style>
<!--
#jquery-sample input {
margin: 5px;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">value属性値変更</button>
</p>
<p id="jquery-sample">
<input type="text" value="sample" />
<input type="text" value="sample" />
<input type="text" value="sample" />
</p>
<button id="jquery-sample-button">value属性値変更</button>
</p>
<p id="jquery-sample">
<input type="text" value="sample" />
<input type="text" value="sample" />
<input type="text" value="sample" />
</p>