フォームの部分的にリセットをしたいのですがjavascriptわかる方助けてください。。。

Question

<form>


<div class="test01">
<input type="checkbox">お電話
<input type="checkbox">メール
</div>


<div class="test02">
<input type="checkbox">FAX
<input type="checkbox">手紙
</div>

<input class="clearForm" type="button" value="リセット">
</form>

<script>
$(document).ready(function(){
  $(".clearForm").bind("click", function(){
    $(this.form).find("textarea, :text, select, radio, checkbox").val("").end().find(":checked").prop("checked", false);
  });
});
</script>

上記のようなコードでclassごとにリセットする別のボタンを作れないでしょうか？
例：リセットボタンをおしてclassがtest01の電話とメールのチェックボックスだけをリセットできないでしょうか？

現状のコードでは全てのチェックボックスがリセットになってしまいます。
初歩的な質問ですみません。

よろしくお願いしますm(_ _)m

Comments

[izkn]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

javascriptの部分ですが、チェックボックスをクリアするだけなら、

<script>
$(document).ready(function(){
  $(".clearForm").bind("click", function(){
  $(this.form).find(":checked").prop("checked", false);
  });
});
</script>

で十分です。
その上で、例えば FAX と 手紙 だけのグループに適用する場合は、divタグのclassがtest02であることに注目して、

$(document).ready(function(){
  $(".clearForm").bind("click", function(){
  $(this.form).find(".test02 > :checked").prop("checked", false);
  });
});

とすることができます。

このような指定方法は「CSSセレクタ」を参照されたほうがよいです。
http://weboook.blog22.fc2.com/blog-entry-268.html