WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

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

<<  January 2020  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar