.NET TIPS

［ASP.NET］CheckBoxListコントロールのチェックあり項目の背景色を変更するには？［C#、VB］

デジタルアドバンテージ　一色 政彦
2010/04/01

　ASP.NETには、複数のチェックボックスをまとめて表示・管理できるCheckBoxListコントロールが用意されている。このCheckBoxListコントロールに含まれるチェックボックスの数が少ない場合は問題ないが、チェックボックスの数が増えてくると、どのチェックボックスがチェックされているのかが見つけにくくなる。

　このような場合には、チェックの入っているチェックボックスの背景色を変更すると見つけやすくなる。次の画面は、実際にそれを行っている例である。

チェックの入っているチェックボックスの背景色を変更している例

　本TIPSでは、CheckBoxListコントロールでチェックされた項目の背景色を変更する方法を紹介する。

●CheckBoxListコントロールでチェックされた項目の背景色を変更する方法

　まず、CheckBoxListコントロールを用意しよう。今回は次のコード例のように3つのリスト項目（＝チェックボックス項目）を追加する。

<asp:CheckBoxList ID="CheckBoxList1" runat="server"
    onclick="colorCheckItem(this);">
  <asp:ListItem Value="1">項目1</asp:ListItem>
  <asp:ListItem Value="2">項目2</asp:ListItem>
  <asp:ListItem Value="3">項目3</asp:ListItem>
</asp:CheckBoxList>
CheckBoxListコントロール部分のサンプル・コード（Default.aspxの一部）

　上記のコードの太字部分では、onclick属性を指定して、CheckBoxListコントロールがクリックされた際にJavaScriptコードの関数が呼び出されるようにしている。このJavaScript関数自体は、<head>タグの中に、次のように記述する。

<script type="text/javascript">
function colorCheckItem(r) {
  if (r == null) {
    r = document.getElementById("CheckBoxList1");
    if (r == null) {
      return;
    }
  }
  var a = r.getElementsByTagName("input");
  for (var i = 0; i < a.length; i++) {
    var c = a[i];
    if (c.type != "checkbox") {
      continue;
    }
    if (c.checked) {
      c.parentNode.style.backgroundColor = "#ffcc99";
    } else {
      c.parentNode.style.backgroundColor = "transparent";
    }
  }
}
</script>
チェックされた項目の背景色を設定するJavaScript関数のサンプル・コード（Default.aspxの一部）
「CheckBoxList1」はCheckBoxListコントロールのIDである。

　上記のJavaScriptコードでは、CheckBoxListコントロール内に含まれる、すべての「<input type="checkbox">」要素のそれぞれに対して、チェックボックスがチェックされていれば「#ffcc99」の背景色を設定し、そうでなければ「transparent」（透明）を設定する処理を記述している。

　以上の処理で、チェックボックスがクリックされたタイミングで、チェックありの項目のみ、背景色が設定されるようになる。

　ただし、これではクリックされたタイミングでしか背景色を設定しない。つまり、最初からチェックが入っている項目には背景色が設定されないのだ。

　この問題を解決するには、次のコード例のように、HTMLがロードされたタイミングでも、前述のJavaScript関数を呼び出す必要がある。

<body onload="colorCheckItem(null);">
HTMLロード時にJavaScript関数を呼び出すサンプル・コード（Default.aspxの一部）

　<body>タグのonload属性で呼び出すJavaScript関数では、引数に「null」が設定されている（<asp:CheckBoxList>タグのonclick属性では、自分自身のオブジェクトを意味する「this」が設定されていた）。前述のJavaScript関数では、引数が「null」の場合、IDが「CheckBoxList1」の要素を取得して、そのCheckBoxListコントロールを処理するようになっている。

　以上の内容で、HTMLロード時でチェックされている項目の背景色も設定されるようになる。 End of Article

カテゴリ：Webフォーム　処理対象：CheckBoxListコントロール
使用ライブラリ：CheckBoxListコントロール

この記事と関連性の高い別の.NET TIPS
DataGridコントロールで入力中のセルをハイライト表示するには？
PictureBoxコントロール上に文字を表示するには？
［ASP.NET］GridViewコントロールでマウス・ホバー行を強調表示するには？
［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？
チェックボックスの値を読み書きするには［JavaScript／jQuery］
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT