Question

我有RadioButtonList喜欢：

<asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
  <asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist"></asp:ListItem>
  <asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist"></asp:ListItem>
</asp:RadioButtonList>

我想将红色应用于ListItem为value为1的黄色，黄色为ListItem，其value为2，绿色为{{1}它的ListItem是3，依此类推。我该怎么做？

我正在使用ASP.Net网络表单。无论是jQuery还是CSS都可以。

问题是我有10个以上的单选按钮列表。我必须像我在上面的问题中提到的那样为所有这些设置颜色。每个单选按钮列表显然具有不同的Id，但它们都有5个选项。完成此任务的最佳方法是什么？

Answer 1

你可以为每个ListItem提供不同的CSS类，然后定义它们的颜色。这个：

ASP.NET：

<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>

CSS：

.radiobuttonlist1{
     color:red;
 }
.radiobuttonlist2{
     color:yellow;
 }

Answer 2

或者在代码背后你可以使用它：

foreach (ListItem i in rbl1.Items)
     if (i.Value == "1")
         i.Attributes["style"] = "color:red;";
     else if (i.Value == "2")
         i.Attributes["style"] = "color:yellow;";

Answer 3

您可以对每个函数使用jQuery，如下所示

 $("#rbl1 option").each(function()
 {
    $(this).css('backgroundColor', 'red');
 });

这将改变整个项目的背景颜色。

在您的情况下，您还必须检查值

 $("#rbl1 option").each(function()
 {
     if($(this).val()=="1")
         $(this).css('backgroundColor', 'red');
     if($(this).val()=="2")
         $(this).css('backgroundColor', 'yellow');
     if($(this).val()=="3")
         $(this).css('backgroundColor', 'green');
 });

Answer 4

如果您有10个RadioButtonList并希望为每个{1}做同样的事情，您可以对五个ListItem中的每一个进行分类并在CSS中定义颜色。两个RadioButtonList的示例：

<asp:RadioButtonList ID="rbl1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>
<asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist3"/>
<asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist4"/>
<asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist5"/>
</asp:RadioButtonList>

<asp:RadioButtonList ID="rbl2" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" SelectedValue='<%#Bind("A1") %>'>
<asp:ListItem runat="server" Text="1" Value="1" class="radiobuttonlist1"/>
<asp:ListItem runat="server" Text="2" Value="2" class="radiobuttonlist2"/>
<asp:ListItem runat="server" Text="3" Value="3" class="radiobuttonlist3"/>
<asp:ListItem runat="server" Text="4" Value="4" class="radiobuttonlist4"/>
<asp:ListItem runat="server" Text="5" Value="5" class="radiobuttonlist5"/>
</asp:RadioButtonList>

然后在CSS中：

.radiobuttonlist1{
   color:red;
 }
.radiobuttonlist2{
   color:yellow;
 }
.radiobuttonlist3{
   color:green;
 }
.radiobuttonlist4{
   color:magenta;
 }
.radiobuttonlist5{
   color:blue;
 }

将不同的颜色应用于RadioButtonList的不同项目

4 个答案: