WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

GridView 内の全 CheckBox をオン

by WebSurfer 7. October 2010 23:55

先の 記事で CheckBox にチェックを入れる/外すことによって、当該 CheckBox のテキストのスタイル(文字の色、下線の有無)を変化させる方法を書きました。

今回はその続編(?)として、GirdView の各行に配置した複数の CheckBox に、一度に全部チェックを入れたり外したりする操作を、クライアントサイドのスクリプトで実行する方法を書きます。

GridView 内の全 CheckBox をオン

書きますといっても、コードは 4 Guys From Rolla.com の ページ "Checking All CheckBoxes in a GridView Using Client-Side Script and a Check All" からほぼ丸写しさせてもらったものですが。

[Check All]ボタンをクリックすると、ヘッダーを含むすべての行の CheckBox にチェックが入るようになっています。[Uncheck All]ボタンをクリックすると、すべての行の CheckBox のチェックが外れるようになっています。

ヘッダーの CheckBox にチェックを入れると、各行に配置した CheckBox 全部にチェックが入ります。その状態から、ヘッダーの CheckBox のチェックを外すと、各行の CheckBox のチェックも外れるようになっています。

また、各行に配置した CheckBox に手動で一つ一つチェックを入れていって、すべての CheckBox にチェックが入った時、ヘッダーの CheckBox にもチェックが入るようになっています。その状態から、各行に配置した CheckBox の一つでもチェックを外すと、ヘッダーの CheckBox のチェックも外れるようになっています。

まずは普通の JavaScript を使って書きました。コードは以下の通りです。jQuery を使ってみましたが、かなりコード量を減らすことができるのは確かのようです。別途、jQuery バージョンもアップしますので、乞うご期待。(笑)

コードビハインド

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class _051_CheckUncheckAllCheckBoxesInGridView_1_ : System.Web.UI.Page
{
  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();
    }
  }

  protected void GridView1_DataBound(object sender, EventArgs e)
  {
    CheckBox cbHeader =
      (CheckBox)GridView1.HeaderRow.FindControl("CheckBox1");
   cbHeader.Attributes["onclick"] =
      "ChangeAllCheckBoxStates(this.checked);";

    List<string> ArrayValues = new List<string>();
    ArrayValues.Add(String.Concat("'", cbHeader.ClientID, "'"));

    foreach (GridViewRow row in GridView1.Rows)
    {
      CheckBox cb = (CheckBox)row.FindControl("CheckBox2");
      cb.Attributes["onclick"] = "ChangeHeaderAsNeeded();";
      ArrayValues.Add(String.Concat("'", cb.ClientID, "'"));
    }

    CheckBoxIDsArray.Text =
      "<script type=\"text/javascript\">\n" +
      "//<![CDATA[\n" +
      String.Concat("var CheckBoxIDs =  new Array(",
                     String.Join(",", ArrayValues.ToArray()),
                     ");\n"
                   ) +
      "//]]>\n" +
      "</script>";
  }
}

aspx ファイル

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="051_CheckUncheckAllCheckBoxesInGridView(1).aspx.cs" 
  Inherits="_051_CheckUncheckAllCheckBoxesInGridView_1_" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Check/Uncheck All CheckBoxes in a GridView</title>
  <script type="text/javascript">
    <!--
    function ChangeCheckBoxState(id, checkState) {
      var cb = document.getElementById(id);
      if (cb != null) {
        cb.checked = checkState;
      }
    }

    function ChangeAllCheckBoxStates(checkState) {
      if (CheckBoxIDs != null) {
        for (var i = 0; i < CheckBoxIDs.length; i++) {
          ChangeCheckBoxState(CheckBoxIDs[i], checkState);
        }
      }
    }

    function ChangeHeaderAsNeeded() {
      if (CheckBoxIDs != null) {
        for (var i = 1; i < CheckBoxIDs.length; i++) {
          var cb = document.getElementById(CheckBoxIDs[i]);
          if (!cb.checked) {
            ChangeCheckBoxState(CheckBoxIDs[0], false);
            return;
          }
        }
        ChangeCheckBoxState(CheckBoxIDs[0], true);
      }
    }
    //-->>
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <h2>Check/Uncheck All CheckBoxes</h2>
    <input type="button" 
      value="Check All" 
      onclick="ChangeAllCheckBoxStates(true);" /> 
    <input type="button" 
      value="Uncheck All" 
      onclick="ChangeAllCheckBoxStates(false);" />
        
    <asp:GridView ID="GridView1" 
      runat="server" 
      AutoGenerateColumns="False" 
      OnDataBound="GridView1_DataBound">
      <Columns>
        <asp:TemplateField>
          <HeaderTemplate>
            <asp:CheckBox runat="server" ID="CheckBox1" />
          </HeaderTemplate>
          <ItemTemplate>
            <asp:CheckBox runat="server" ID="CheckBox2" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderText="Item" DataField="Item" />
        <asp:BoundField HeaderText="Name" DataField="Name" />
        <asp:BoundField HeaderText="Price" DataField="Price" />
      </Columns>
    </asp:GridView>
    <asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal>    
  </div>
  </form>
</body>
</html>

--------------- 2010/10/8 追記 ---------------

上記は、普通の JavaScript を使ったものですが、jQuery を使って書き換えたものを別の記事 GridView 内の全 CheckBox をオン(jQuery) にアップしました。jQuery のセレクタのパワーを垣間見たような気がします。ぜひ違いを見てください。

Tags: ,

JavaScript

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  October 2020  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar