Question

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

给定一个在RadioItems上设置类的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的问题。）

Answer 1

是的，RadioButtonList呈现可怕的HTML。

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

尝试

$('span.myclass input:radio')

上面将使用类'myclass'获取范围内的所有单选按钮。

Answer 2

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

所以在CSS中而不是以下内容：

.myClass { ... }

你使用这个：

.myClass input { ... }

我不知道你是否可以以声明的方式设置class属性（通过类或CSSClass）;但是，上面的内容应该会给你一个解决方法。

Answer 3

未经测试

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

呈现列表后，您可以使用上述语句操作css客户端。

Answer 4

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

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

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

Answer 5

desigeek的回应非常好......

为了让这个用于radiobuttons，我必须在document.ready（）

上执行此操作

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

我确信通过循环可以有更好的方法来实现它，但我需要快速修复5个radiobutton列表..

在ASP.NET RadioButtonList ListItem上设置CSS类

5 个答案: