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

CheckBox のテキスト

by WebSurfer 4. October 2010 22:05
CheckBox のテキストのスタイル変更

CheckBoxList の CheckBox にチェックを入れる/外すという操作によって、当該 CheckBox のテキストのスタイルを変える方法の紹介です。

左の画像のように、チェックを入れると、その CheckBox のテキストが赤色になり下線が追加されるようにしてみました。

チェックを外すと、テキストは元の黒色になり、下線も消えるようになっています。

コードを見ればどのようになっているかはすぐ分かると思いますので、説明抜きでコードのみアップしておきます(実は手抜きです)。(笑)

<%@ 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">
  // CheckBoxList 生成のための DataTable
  DataTable CreateDataTable()
  {
    DataTable dt = new DataTable();
    DataRow dr;

    dt.Columns.Add(new DataColumn("Code", typeof(Int32)));
    dt.Columns.Add(new DataColumn("Name", typeof(String)));
    int i;
    for (i = 0; i < 5; i++)
    {
      dr = dt.NewRow();
      dr[0] = i + 1;
      dr[1] = String.Format("Item {0}", i + 1);
      dt.Rows.Add(dr);
    }
    dr = dt.NewRow();
    dr[0] = i + 1;
    dr[1] = "その他";
    dt.Rows.Add(dr);
    return dt;
  }

  void Page_Load(Object sender, EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      CheckBoxList1.DataSource = CreateDataTable();
      CheckBoxList1.DataBind();
      CheckBoxList1.Attributes.Add("onclick", 
        "javascript:CheckBoxListOnCheck(this)");
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript">
  <!--
    function CheckBoxListOnCheck(obj) {
      var inputItemArray = obj.getElementsByTagName('input');
      for (var i = 0; i < inputItemArray.length; i++) {
        var inputItem = inputItemArray[i];

        if (inputItem.checked) {
          inputItem.parentNode.className = 'checkboxSelected';
        } else {
          inputItem.parentNode.className = 'checkbox';
        }
      }
    }
  //-->
  </script>

  <style type="text/css">
    .checkbox
    {
      color: Black;
      text-decoration: none;
    }        
    .checkboxSelected
    {
      color: Red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:CheckBoxList ID="CheckBoxList1" 
      runat="server" 
      DataTextField="Name" 
      DataValueField="Code">
    </asp:CheckBoxList>
  </div>
  </form>
</body>
</html>

------------ 2010/4/24 追記 ------------

この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。

Tags:

JavaScript

About this blog

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

Calendar

<<  August 2020  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar