by WebSurfer
2012年4月29日 23:44
ユーザーが TextBox や CheckBox に入力した文字、チェックをクリアするという話です。
html の <input type="reset" ... がユーザー入力をクリアするのに使えますが、あらかじめ TextBox.Text や ChechBox.Checked を設定してあると、それらはクリアできません。
また、一旦ポストバックすると TextBox には入力した文字列が(html では <input type="text" ... の value 属性の文字列)、CheckBox にはチェックした結果(html では <input type="checkbox" ... の checked 属性)が設定されるはずです。
その状態では <input type="reset" ... では TextBox も CheckBox もクリアできません。もともと <input type="reset" ... は、元に戻すということらしく、完全にクリアするということではないようです。
完全にクリアするには、サーバー側で行う方法もありますが、わざわざポストバックしてサーバー側で処置するのはムダなので、クライアントスクリプトで対応するのがよさそうです。
JavaScript でも可能だと思いますが、複数の input 要素に同じ処置を繰り返すので jQuery を使うのが簡単です。以下のコードような感じです。
実際に動かして試せるよう 実験室 にアップしましたので、興味のある方は試してみてください。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
// [Uncheck All]ボタンクリックで、すべての TextBox,
// CheckBox のチェックを外す。
$(function () {
$('#clearAll').click(function () {
$('input:checkbox').attr('checked', false);
$('input:text').val("");
});
});
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button"
id="clearAll" value="jQuery でクリア" />
<br />
<input id="Reset1"
type='reset' value="input type='reset'" />
<hr />
<asp:TextBox ID="TextBox1"
runat="server" Text="ABC">
</asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server">
</asp:TextBox>
<br />
<asp:CheckBox ID="CheckBox1"
runat="server" Checked="True" />
<br />
<asp:CheckBox ID="CheckBox2" runat="server" />
<br />
<asp:Button ID="Button1"
runat="server" Text="PostBack" />
</div>
</form>
</body>
</html>