by WebSurfer
8. October 2010 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 追記 ------------
この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。
by WebSurfer
18. September 2010 14:03
今さらながらですが、jQuery の勉強を始めようと思って、本を買ってきました。
今の時代の流れは JavaScript ではなく、それをラップしてライブラリ化（正しい表現ではないかも）した jQuery のように思います。
先の記事 Visual Studio 2010 にも書きましたが、Visual Studio 2010 には jQuery が標準で実装されています。
なので、自分もそろそろ勉強を始めて jQuery を使えるようにならないと、時代に取り残されそうです。
もともと、JavaScript の知識はほとんどなかったので勉強しなければと思っていたのですが、いまさら JavaScript の勉強を始めるよりは、これを契機に jQuery の勉強をした方がよさそうだと思ったしだいです。
本屋さんで見た限りでは、ASP.NET と連携して jQuery がどのように利用できるかが述べられているのは、左の写真のものしかなかったので、この本にしました。
最初の何も知らない状態で本を見て、よく分かるのでよさそうだと思って買うと、実は初歩的過ぎる内容で、すぐに物足りなくなって失敗したと思うことがよくあります。
そう思って、少しレベルが高そうな本を買うと、今度は高すぎてほとんど理解できず、本棚にしまいこんだままになってしまうこともよくあって、なかなか自分にぴったりのレベルの本を見つけるのが難しいです。
専門書は高価なので、買った本が合わなかったからといって次から次へと買うわけにも行かず、悩ましいところです。
今度はどうなんでしょうね。とにかく、本を読み進めて、サンプルを動かしてみます。その結果は、またここに書くつもりです。