次のように私は自分のWebページでのCheckBoxListを使用しています

Question

：

<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal" 
        AutoPostBack="True" Width="594px" 
        OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged"> 
    <asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem> 
    <asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem> 
    <asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem> 
    <asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem> 
</asp:CheckBoxList> 

を今、私は、リストの項目をチェックすると、私はのためにいくつかの背景色を適用したいと思いますその特定の選択された項目。チェックを外すと、背景が最初に表示された色と同じになるようにするか、背景色を削除したいと思います。

Answer 1

は、あなたは選択肢のいくつかを着色することができます。この

 for (int i = 0; i < chklstTelpas.Items.Count; i++) 
     { 
      if (chklstTelpas.Items[i].Selected) 
      { 
       chklstTelpas.Items[i].Attributes.Add("style", "background-color: red;"); 
      } 
      else 
      { 
       chklstTelpas.Items[i].Attributes.Add("style", "background-color: white;"); 
      } 
     } 

このような何かを行うことができます。 SelectedIndexを使用すると、最も低いインデックスしか得られません。

Answer 2

SelectedIndexChangedで行うことができます。DropDownのイベントです。

chklstTelpas.Items[chklstTelpas.SelectedIndex].Attributes.Add("style", "background-color:blue;"); 

Answer 3

私は漠然とそれがアイテムをループすることによって、あなたは属性を設定チェックされた項目

CheckBoxItem.Attributes.Add("Style", "color: red;") 

Answer 4

protected void chklstTelpas_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     Control chk = ((Control)sender).FindControl("chk"); 
     CheckBoxList ch=(CheckBoxList) chk; 
     if (ch.Items[ch.SelectedIndex].Selected) 
      ch.Items[ch.SelectedIndex].Attributes.Add("Style", "background-color: red;"); 

    } 

・ホープ、このことができますのために行うことができます覚えておいてください！

Answer 5

<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal" 
       AutoPostBack="True" Width="594px" 
       OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged" CssClass="multiplus"> 
<asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem> 
<asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem> 
<asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem> 
<asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem> 

としてjqueryのコードを書く、その後のCheckBoxListするCSSクラスを追加します。いくつかのCSSがあなたを取得する必要があります

var selectedBox = 0; 
var lastChecked = null; 
$(document).ready(function() { 
    $(".multiplus input:checkbox").click(
       function() { 

         if ($(this).attr("checked")) { 
          $(lastChecked).attr("checked", false).parent().css({ "background-color": "#FFF", "font-weight": "normal" }); 
          lastChecked = this; 

        } 
        if ($(this).attr("checked")) { 
         $(this).parent().css({ "background-color": "#FFC", "font-weight": "bold" }); 
         selectedBox++; 
        } else { 
         $(this).parent().css({ "background-color": "#FFF", "font-weight": "normal" }); 
         selectedBox--; 
        } 
       } 
      ); 
});