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

  • 質問

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

    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>

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

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

    2009年8月18日 9:53

回答

すべての返信

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

    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/
    • 回答としてマーク コンドル 2009年8月19日 4:10
    2009年8月19日 0:13
    モデレータ
  • 役に立たないですが一応…
    CSS3の機能を使えば、JavaScriptなしで表現できます。

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

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

    2009年8月19日 2:50
  • 以下が参考になると思います。

    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'

    とても助かりました。
    ありがとうございました。
    2009年8月19日 4:08
  • 役に立たないですが一応…
    CSS3の機能を使えば、JavaScriptなしで表現できます。

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

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


    佐祐理様

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

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

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

    2009年8月19日 4:10
  • parentElement はIE専用です。同じ動作をするparentNode はDOM Level1準拠ですのでこちらをお勧めします。
    たとえばFirefoxにはparentNodeしかありません
    • 回答としてマーク コンドル 2009年8月20日 0:31
    2009年8月19日 13:37
  • parentElement はIE専用です。同じ動作をするparentNode はDOM Level1準拠ですのでこちらをお勧めします。
    たとえばFirefoxにはparentNodeしかありません

    佐祐理様

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

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

    とても助かりました。
    ありがとうございます。
    2009年8月20日 0:31