by WebSurfer
2010年10月8日 22:11
GirdView の各行に配置した複数の CheckBox に、一度に全部チェックを入れたり外したりする操作を、クライアントサイドのスクリプトで実行する方法の jQuery バージョンです。
普通の JavaScript を使ったバージョンは、先の記事 GridView 内の全 CheckBox をオン にありますので、見比べてみてください。
ネタは先の記事 jQuery の本を買いました で紹介した本の中のサンプルです。
コードは以下の通りです。説明はコードの中にコメントとして入れましたので、そちらを参照してください。
jQuery を使うと、普通の JavaScript を使った場合と比べて、かなりコード量を減らすことができるのは確かのようです。でも、考え方がかなり違うようで、コードの書き方も自分の常識を超えてました。jQuery のセレクタのパワーを垣間見ることができたような気もしますが、正直言って、まだよく分かってないです。（笑）
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
DataTable CreateDataTable()
{
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("Item", typeof(Int32)));
dt.Columns.Add(new DataColumn("Name", typeof(string)));
dt.Columns.Add(new DataColumn("Price", typeof(Int32)));
for (int i = 0; i < 10; i++)
{
dr = dt.NewRow();
dr["Item"] = i;
dr["Name"] = "Item " + i.ToString();
dr["Price"] = 123000 * (i + 1);
dt.Rows.Add(dr);
}
return dt;
}
void Page_Load(Object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = CreateDataTable();
GridView1.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Check/Uncheck All CheckBoxes in a GridView</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
// ヘッダーの CheckBox にチェックを入れる/外すのと連
// 動して、各行に配置した CheckBox すべてにチェックを
// 入れる/外す。
$('table tr th input:checkbox').click(function () {
$('table tr td input:checkbox')
.attr('checked', $(this).is(':checked'));
});
// 各行に配置した CheckBox のすべてにチェックが入った
// 時、ヘッダーの CheckBox にもチェックを入れる。
// 各行に配置した CheckBox の一つでもチェックを外すと、
// ヘッダーの CheckBox のチェックが外れる。
$('table tr td input:checkbox').click(function () {
var chkAll =
$('table tr td input:checkbox:not(:checked)')
.length == 0 ? true : false;
$('table tr th input:checkbox')
.attr('checked', chkAll);
});
// ［Check All］ボタンクリックで、すべての CheckBox
// にチェックを入れる。
$('#checkAll').click(function () {
$('table input:checkbox').attr('checked', true);
});
// ［Uncheck All］ボタンクリックで、すべての CheckBox
// のチェックを外す。
$('#uncheckAll').click(function () {
$('table input:checkbox').attr('checked', false);
});
});
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Check/Uncheck All CheckBoxes</h2>
<input type="button"
id="checkAll"
value="Check All" />
<input type="button"
id="uncheckAll"
value="Uncheck All" />
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input id="Checkbox1" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<input id="Checkbox2" type="checkbox" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Item" DataField="Item" />
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Price" DataField="Price" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
------------ 2010/4/24 追記 ------------
この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。