在 ASP.NET RadioButtonList ListItem 上设置 CSS 类

Posted 2023-03-05

【中文标题】在 ASP.NET RadioButtonList ListItem 上设置 CSS 类

【英文标题】：Set a CSS class on an ASP.NET RadioButtonList ListItem

【发布时间】：2010-11-07 10:38:24

【问题描述】：

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

给定一个在 ListItems 上设置类的 ASP.NET RadioButtonList：

 <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>

（这甚至不涉及将类添加到动态绑定的 RadioButtonLists 的问题。）

【参考方案1】：

是的，RadioButtonList 呈现可怕的 html。

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

试试

$('span.myclass input:radio')

Above 将获得类“myclass”的跨度内的所有单选按钮。

【讨论】：

我希望在 ASP.NET 中有一个解决方案，而不是编写一个我缺少的控制适配器，但这是我最终使用的解决方案。

【参考方案2】：

您可能想要尝试的另一种方法是更改​​您的 CSS 类以适应服务器控制渲染。

所以在你的 CSS 中而不是下面的：

.myClass  ... 

你用这个：

.myClass input  ... 

不知道能不能用声明的方式设置class属性（通过class或者CSSClass）；但是，以上内容应该可以解决您的问题。

【讨论】：

我也同意这个。我在单选按钮控件中添加了一个类，并且在我的 css 中有：.myClass > input[type="radio"] ...。工作并保持清洁

【参考方案3】：

未经测试

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

一旦列表被渲染，你可以使用上面的语句来操作 css 客户端。

【参考方案4】：

使用 .NET，您可以为 RowBinding 事件创建一个事件处理程序。这将允许您访问列表中每个项目中的各个控件。拉出 RadioButton 控件后，您可以通过编程将其设置为 CssClass 以在 RadioButton 级别上应用您的类。

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

第三，您可以更改 MyClass 的定义，同时指定它仅应用于应用了 MyClass 的元素下的输入元素。

【参考方案5】：

设计者的反应非常好..

为了让它适用于单选按钮，我必须在 document.ready() 上执行此操作

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

我确信通过循环有更好的方法来做到这一点，但我需要快速修复 5 个单选按钮列表..