.NET TIPS [ASP.NET]CheckBoxListコントロールのチェックあり項目の背景色を変更するには?[C#、VB]デジタルアドバンテージ 一色 政彦2010/04/01 |
![]() |
|
ASP.NETには、複数のチェックボックスをまとめて表示・管理できるCheckBoxListコントロールが用意されている。このCheckBoxListコントロールに含まれるチェックボックスの数が少ない場合は問題ないが、チェックボックスの数が増えてくると、どのチェックボックスがチェックされているのかが見つけにくくなる。
このような場合には、チェックの入っているチェックボックスの背景色を変更すると見つけやすくなる。次の画面は、実際にそれを行っている例である。
![]() |
チェックの入っているチェックボックスの背景色を変更している例 |
本TIPSでは、CheckBoxListコントロールでチェックされた項目の背景色を変更する方法を紹介する。
●CheckBoxListコントロールでチェックされた項目の背景色を変更する方法
まず、CheckBoxListコントロールを用意しよう。今回は次のコード例のように3つのリスト項目(=チェックボックス項目)を追加する。
|
|
CheckBoxListコントロール部分のサンプル・コード(Default.aspxの一部) |
上記のコードの太字部分では、onclick属性を指定して、CheckBoxListコントロールがクリックされた際にJavaScriptコードの関数が呼び出されるようにしている。このJavaScript関数自体は、<head>タグの中に、次のように記述する。
|
|
チェックされた項目の背景色を設定するJavaScript関数のサンプル・コード(Default.aspxの一部) | |
「CheckBoxList1」はCheckBoxListコントロールのIDである。 |
上記のJavaScriptコードでは、CheckBoxListコントロール内に含まれる、すべての「<input type="checkbox">」要素のそれぞれに対して、チェックボックスがチェックされていれば「#ffcc99」の背景色を設定し、そうでなければ「transparent」(透明)を設定する処理を記述している。
以上の処理で、チェックボックスがクリックされたタイミングで、チェックありの項目のみ、背景色が設定されるようになる。
ただし、これではクリックされたタイミングでしか背景色を設定しない。つまり、最初からチェックが入っている項目には背景色が設定されないのだ。
この問題を解決するには、次のコード例のように、HTMLがロードされたタイミングでも、前述のJavaScript関数を呼び出す必要がある。
|
|
HTMLロード時にJavaScript関数を呼び出すサンプル・コード(Default.aspxの一部) |
<body>タグのonload属性で呼び出すJavaScript関数では、引数に「null」が設定されている(<asp:CheckBoxList>タグのonclick属性では、自分自身のオブジェクトを意味する「this」が設定されていた)。前述のJavaScript関数では、引数が「null」の場合、IDが「CheckBoxList1」の要素を取得して、そのCheckBoxListコントロールを処理するようになっている。
以上の内容で、HTMLロード時でチェックされている項目の背景色も設定されるようになる。
カテゴリ:Webフォーム 処理対象:CheckBoxListコントロール 使用ライブラリ:CheckBoxListコントロール |
![]() |
「.NET TIPS」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |