フォームのチェックボックス、セレクト、テキストボックスを一括リセットする

タイトルの通り、チェックボックス、セレクト、テキストボックスに何らかの入力がある場合に、それらの選択を一括で全て解除するボタンをつける方法です。

ぼくの場合は、クライアントさんから検索フォームでチェックした項目を全てクリアするボタンが欲しいとのことでした。

確かに何度も条件検索をおこなう場合は、リセットボタンがあったほうが優しいですね。

そういう細かい仕様については、実際にクライアントさんに利用してもらって意見をもらわないとスルーしちゃいそうです。

調べて実装することで、自分の実力もついていきますのでありがたいと思ってやっています。

チェックボックス、セレクト、テキストボックスのリセットには、jQueryを使うのが簡単そうです。

以下のコードを使います。

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function () {
      $('#clearAll').click(function () {
        $('input:checkbox').attr('checked', false);
        $('input:text').val("");
        $("option").attr("selected",false); 
      });
    });
</script>

$(function () {

$('#clearAll').click(function () {

$('input:checkbox').attr('checked', false);

$('input:text').val("");

$("option").attr("selected",false);

});

</script>

HTMLは次のようにします。

<input id="clearAll" type="button" value="選択解除" />

1	<input id="clearAll" type="button" value="選択解除" />

一度わかっちゃうとそれほど難しくないですね。どうぞご参考まで。