.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
ASP.NETでボタンのクリック時に確認メッセージを表示するには？
PictureBoxコントロール上に文字を表示するには？
Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？
［ASP.NET］DataGridコントロールでマウスのある行を強調表示するには？
DataGridコントロールで入力中のセルをハイライト表示するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH