サンプルです。こんなイメージで

それぞれのテキストボックスに文字を入力してから リセット！ボタンを押すと、入力した文字が全てクリアされて、最初の文字（お名前、電話番号、ご住所）に戻ります。

コードです。

HTML

[html]

<input type="text" value="お名前" />
<input type="text" value="電話番号" />
<input type="text" value="ご住所" />
<input type="button" class="resetB" value="リセット！" />

[/html]

jQuery

[javascript]

jQuery(document).ready(function(){

/*—————————– リセットボタン ——————————*/

// テキストボックスの総数
var inputLength = $(":text").length;
// テキストボックス初期値　を格納
var inputBox = new Array();
for (i=0; i<inputLength; i++) {
inputBox[i] = $("input[type=’text’]").eq(i).val();
}

// リセットボタンのイベント
$(".resetB").click(function(){
// 確認ダイアログ
if (confirm(‘すべての項目をリセットしますnよろしいですか？’)){
// フォームの文字色をリセット
textBox.removeClass("textFocus");
// テキストボックスの初期値　を戻す
for (var i=0; i<inputLength; i++) {
$("input[type=’text’]").eq(i).val(inputBox[i]);
}
}
});

}); //en

[/javascript]

初期値で入力されていて、フォーカスすると消える 薄グレーの文字は、前回の記事
jQueryでテキストボックスに文字を初期値として設定して、フォーカスすると消えるようにする
をご参考ください。

いちおう コードです

[javascript]

/*—————————– テキストフォーカス ——————————*/

var textBox = $("input:text");
var textLength;

textBox.focus(function(){
$(this).addClass("textFocus");
textLength = $(this).val().length;

if(this.value == this.defaultValue){
$(this).val(”);
}
}).blur(function(){
textLength = $(this).val().length;

if($(this).val() == this.defaultValue | $(this).val() == ”){
$(this).val(this.defaultValue).removeClass("textFocus");
}
});

[/javascript]

[css]

input[type="text"] {
color: #bbb;
display: block;
}

.textFocus {
color: #333 !important;
}

[/css]

HTMLには <reset> タグはありますが．．．

<reset> タグを使用すると、こんなややこいコードを書かなくっても一発でリセットできてしまうんです。が、ブラウザやページの仕様によっては、Enterキーの誤動作などで リセットボタンを押してないのに リセットが効いてしまうことがあります。あったんです。

今回は私が HTMLの<reset>タグを使用せず、かつリセットを導入しないといけない事態に遭遇してしまったので やりくりしたコードを記述しておきました。

コードの解説です

おおざっぱに流れを説明すると、

テキストボックスの初期値（value）をひとつずつ取得
↓
配列（今回は inputBox）にして格納しておく
↓
リセット！が押されたら ひとつずつ戻す

という感じにしました。

そのために まずはテキストボックスの総数をカウントします。あとでfor文にして順繰りで値を取ったり戻したりするためです。

[javascript]

// テキストボックスの総数
var inputLength = $(":text").length;
// （今回は　3　になります）

[/javascript]

つづいて、テキストボックスの初期値（value）を全て取得します。HTMLで記述されている順にテキストボックスの初期値を取得します。さきほど取得した総数の回数分、1個1個取得していきます。

[javascript]

// テキストボックス初期値　を格納
var inputBox = new Array(); // 配列を宣言します

// テキストボックスの数だけ繰り返します
for (i=0; i<inputLength; i++) {
// 配列のキーと テキストボックスの順番を揃えて代入します
inputBox[i] = $("input[type=’text’]").eq(i).val();
}

[/javascript]

これでリセット！を押した際に戻す値をゲットできました。
あとは戻すだけです。
[javascript]

// リセットボタンのイベント
$(".resetB").click(function(){
// 確認ダイアログ
if (confirm(‘すべての項目をリセットしますnよろしいですか？’)){
// テキストボックスの初期値　を戻す
for (var i=0; i<inputLength; i++) {
// テキストボックスの順番通りに 配列の中身を戻していく
$("input[type=’text’]").eq(i).val(inputBox[i]);
}
}
});

[/javascript]

できました！(*´꒳`*)
やや力技感が否めませんが、とりあえず思った通りに動くことが大事！と思います
以上です！