将样式应用于 ASP.NET RadioButtonList

Posted 2023-03-06

【中文标题】将样式应用于 ASP.NET RadioButtonList

【英文标题】：Applying style to ASP.NET RadioButtonList

【发布时间】：2015-11-01 21:50:08

【问题描述】：

我正在尝试像这样在 ASP.NET 中设置 RadioButtonList 的样式：

可以在这里找到FlatUI link

我注意到 FlatUI 单选按钮的格式如下：

但是当我给 RadioButtonList 一个类时，我没有得到想要的输出。

我的标记是这样的

<div class="col-lg-12">
     <div class="col-lg-5">
                        <asp:RadioButtonList ID="WTRBTNList" OnSelectedIndexChanged="WTRBTNList_SelectedIndexChanged"
                            AutoPostBack="true" runat="server" CssClass="radio">
                            <asp:ListItem  Text="Pending Tests" Value="Pending" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Approved Tests" Value="Approved"></asp:ListItem>
                            <asp:ListItem Text="Rejected Tests" Value="Rejected"></asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
         <div class="col-lg-7">
     </div>
 </div>

有人可以指导我正确的方向吗？我在这里错过了什么？

【问题讨论】：

作为一名前端开发人员并使用 .NET，我建议放弃任何 <asp> 标记来创建表单元素，尤其是复选框/单选列表。只需简单地创建自己想要的 html，而不是依赖 .NET 为您呈现像巧克力茶壶一样有用的东西。

@JamieBarker 谢谢...听起来不错...但是在更改单选按钮选择时，.NET 会进行回发。如果我使用纯 html，我将如何拥有该功能？

javascript/jQuery。你有 jQuery 标签，所以我会给你一个 jQuery 示例：$('input[type="radio"]).on('change', function() $(this).closest('form').submit(); );。这将获取所有单选按钮并在更改时提交最接近它们的表单，或者更确切地说是它们嵌套在其中的表单。

让我试试...会回复你...谢谢你的帮助:)

还有一个 helpful article 用于仅使用 CSS 设置单选按钮的样式。

【参考方案1】：

正如评论中所建议的，您应该放弃糟糕的 .NET <asp> 输入标签并使用本机代码，尤其是单选和复选框列表。

<div class="col-lg-12">
    <div class="col-lg-5">
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Pending" Then%> checked="checked"<%End If%> /><label>Pending</label>
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Approved" Then%> checked="checked"<%End If%> /><label>Approved</label>
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Rejected" Then%> checked="checked"<%End If%> /><label>Rejected</label>
     </div>
</div>

那么如果你想在点击收音机时保持表单发布，请使用以下 jQuery：

$('input[type="radio"]).on('change', function() 
    $(this).closest('form').submit();
);

如果你想为你的单选按钮设置样式，你可以阅读这个helpful article，它使用了:checked 伪选择器：

input[type="radio"]:checked + label  

【讨论】：

解释得很好......如果这些单选按钮在 UpdatePanel 中，我使用了这个 __doPostBack('MainContent_UpdatePanel1', '');