CheckBoxListにチェックを入れたら、その項目の文字色を変更したい

Question

いつもお世話になっております。

VB2008でASP.NETの開発をしています。

CheckBoxListを使用していまして、
その中のチェックボックスにチェックを入れたら、
その項目の文字色を変更したいと思っております。

チェックを入れるだけでページロードはしたくないので、
JavaScriptで対応したいと思っているのですが、
どのようにプログラムして良いかが分からなくて質問させていただきました。

CheckBoxListのDataBoundイベントで以下のプログラムを書いています。

For Each item As ListItem In CType(sender, CheckBoxList).Items
    item.Attributes.Add("OnClick", "setColor(this);")
Next

<script type="text/javascript">
<!--
function setColor(obj){
    if (obj.checked) {
     //色を変えたい
    } else {
     //色を戻したい
    }
}
//-->
</script>

クリックしたチェックボックスの文字色を変更するには、
どのようにプログラムしたら良いのでしょうか？

もしよろしければ、ご教示ください。
ぜひ、よろしくお願いいたします。

Answer 1

以下が参考になると思います。

Changing the backcolor once i check the checkbox in checkbox list using javascript
http://forums.asp.net/p/1283978/2462077.aspx#2462077

---

★良い回答には回答済みマークを付けよう！ わんくま同盟 MVP - Visual C# http://blogs.wankuma.com/trapemiya/

Answer 2

役に立たないですが一応…
CSS3の機能を使えば、JavaScriptなしで表現できます。

// チェックされた項目に隣接するlabelタグに適用
input:checked + label {
  background-color: Red;
}

Firefox 3.5では動作しました。
IE8はダメでした。:checked疑似クラスに未対応、+隣接セレクタは読み込み時にしか作動しないようです。
幅広いブラウザに対応させるにはJavaScriptを使うことになるでしょう。

Answer 3

以下が参考になると思います。

Changing the backcolor once i check the checkbox in checkbox list using javascript
http://forums.asp.net/p/1283978/2462077.aspx#2462077

trapemiya様

ご回答ありがとうございました。
とても参考になりました。

次のように書くことで、文字色を変更できました。
obj.parentElement.style.color = 'red'

とても助かりました。
ありがとうございました。

Answer 4

役に立たないですが一応…
CSS3の機能を使えば、JavaScriptなしで表現できます。

// チェックされた項目に隣接するlabelタグに適用
input:checked + label {
  background-color: Red;
}

Firefox 3.5では動作しました。
IE8はダメでした。:checked疑似クラスに未対応、+隣接セレクタは読み込み時にしか作動しないようです。
幅広いブラウザに対応させるにはJavaScriptを使うことになるでしょう。

佐祐理様

ご回答ありがとうございました。
CSSでも表現できるのですね。
まったく知りませんでしたので、とても参考になりました。

今回はIEをターゲットにしているので、
使えなそうですが、今後の参考にさせて頂きます。

ありがとうございました。

Answer 5

parentElement はIE専用です。同じ動作をするparentNode はDOM Level1準拠ですのでこちらをお勧めします。
たとえばFirefoxにはparentNodeしかありません 。

Answer 6

parentElement はIE専用です。同じ動作をするparentNode はDOM Level1準拠ですのでこちらをお勧めします。
たとえばFirefoxにはparentNodeしかありません 。

佐祐理様

ご回答ありがとうございます。
parentElementはIE専用だったのですね。
とても勉強になりました。

複数のブラウザに対応するためには、
その辺も意識した設計、製造が必要なのですね。
私には、その視点が欠けておりました。

とても助かりました。
ありがとうございます。