代码之家 › 专栏 › 技术社区 › y0mbo

在ASP.NET RadioButtonList列表项上设置CSS类

listitem radiobuttonlist css asp.net

y0mbo · 技术社区 · 16 年前

有没有办法在单选按钮列表中的输入项上设置CSS类?我想在jquery中按类引用这些表单值。

给定一个ASP.NET RadioButtonList,其中的类设置在ListItems上:

 <asp:RadioButtonList ID="RadioButtonList" runat="server">
      <asp:ListItem class="myClass" Text="Yes" Value="1" />
      <asp:ListItem class="myClass" Text="No" Value="0" />
 </asp:RadioButtonList>

将呈现为:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span class="myClass">
          <input id="RadioButtonList_0" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span class="myClass">
          <input id="RadioButtonList_1" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

不幸的是,“myClass”类被添加到 <span> 包含单选按钮项,而不是 <input> 本身。我怎么能让它看起来像这样呢:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span>
          <input id="RadioButtonList_0" class="myClass" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span>
          <input id="RadioButtonList_1" class="myClass" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

(这甚至不涉及向动态绑定的RadioButtonList添加类的问题。)

5 回复 | 直到 10 年前

SolutionYogi Eric Lippert 16 年前

是的,RadioButtonList呈现可怕的HTML。

无论如何,从jquery中获取它们仍然很容易。

尝试

$('span.myclass input:radio')

上面将显示“myClass”类的范围内的所有单选按钮。

JamesEggers 16 年前

您可能希望尝试做的另一个选择是更改CSS类以适应服务器控件呈现。

因此,在您的CSS中,而不是以下内容:

.myClass { ... }

你用这个:

.myClass input { ... }

我不知道您是否可以用声明性的方式设置class属性(通过class或cssclass);但是,上面应该给您一个解决方法。

Punit Vora 16 年前

未经测试的

$('.myclass input:radio').each(function() {
        this.css({'style-name':'style-value'})
)};

列表呈现后,您可以使用上面的语句来操作CSS客户端。

Relster 16 年前

使用.NET可以创建rowbinding事件的事件处理程序。这将允许您访问列表中每个项内的单个控件。一旦你拉动RadioButton控件,你可以通过编程设置它的CSSClass来将类应用到RadioButton级别。

您还可以使用jquery来查找应用了myClass的单选按钮控件,然后将另一个类应用于该控件。

第三,您可以更改myClass的定义,指定它只应用于已应用myClass的元素下的输入元素。

Markive 16 年前

德奇克的反应相当不错。

要使此功能适用于单选按钮,我必须在document.ready()上执行此操作。

$('#<%=radRisksMarginTrading.ClientID  %>_0').addClass("validate[required]");
$('#<%=radRisksMarginTrading.ClientID  %>_1').addClass("validate[required]");

我确信有一个更好的方法可以通过循环来实现,但是我需要一个快速修复5个单选按钮列表。