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

html
1<form>
2
3
4<div class="test01">
5<input type="checkbox">お電話
6<input type="checkbox">メール
7</div>
8
9
10<div class="test02">
11<input type="checkbox">FAX
12<input type="checkbox">手紙
13</div>
14
15<input class="clearForm" type="button" value="リセット">
16</form>
17
18<script>
19$(document).ready(function(){
20  $(".clearForm").bind("click", function(){
21    $(this.form).find("textarea, :text, select, radio, checkbox").val("").end().find(":checked").prop("checked", false);
22  });
23});
24</script>
25

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

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

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

izkn

2016/01/20 03:16

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

javascript
1<script>
2$(document).ready(function(){
3  $(".clearForm").bind("click", function(){
4  $(this.form).find(":checked").prop("checked", false);
5  });
6});
7</script>

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

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