格式化复选框？答案

【问题标题】：Formatting checkbox?格式化复选框？
【发布时间】：2012-05-22 01:19:20
【问题描述】：

我正在开发一个使用 .net 构建的网站，我正在尝试输出我的标记...

<span class="check-input">
     <!-- Terms -->
     <input type="checkbox" id="terms" class="terms checkbox">
     <label for="terms">I agree to the terms and conditions</label>
     <input type="checkbox" id="age" class="age checkbox">
     <label for="age">I am over 18 years old</label>
     </span>

只有我的开发人员编写的代码是...

<!-- Terms -->
       <asp:CheckBox ID="CB_Agree" 
       Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

       <asp:CheckBox ID="CB_Age" 
       Text="I am over 18 years old" runat="server" TabIndex="5" />

这是将我的数据输出为...

<span class="check-input">
<!-- Terms -->
<span class="terms checkbox">
    <input type="checkbox" tabindex="4" name="ctl00$ContentPlaceHolder1$CB_Agree" id="ctl00_ContentPlaceHolder1_CB_Agree">
    <label for="ctl00_ContentPlaceHolder1_CB_Agree">I agree to the terms and conditions</label>
</span>
<span class="age checkbox">
    <input type="checkbox" tabindex="5" name="ctl00$ContentPlaceHolder1$CB_Age" id="ctl00_ContentPlaceHolder1_CB_Age">
    <label for="ctl00_ContentPlaceHolder1_CB_Age">I am over 18 years old</label>
</span>
</span>

【问题讨论】：

不确定您的确切问题是什么。
请注意，回答您问题的人似乎也不知道。有人回答如何调整课程，有人回答如何使客户端 ID 匹配...
您能否澄清问题，以便我们尝试帮助您？

标签： c# asp.net .net css checkbox

【解决方案1】：

然后您（或您的开发人员）需要将CssClass 属性添加到复选框。

例如：

<asp:CheckBox ID="CB_Agree" 
       CssClass="terms checkbox"
       Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

它还有一个InputAttributes 来控制复选框的布局和一个LabelAttributes 属性来控制范围。

因此，您可以通过以下方式在代码隐藏中应用不同的背景颜色：

CB_Agree.InputAttributes.CssStyle.Add("background-color", "Red");
CB_Agree.LabelAttributes.CssStyle.Add("background-color", "Green");

【讨论】：

【解决方案2】：

您将无法控制名称的输出方式，但您绝对可以控制 ID 的输出方式。一种方法是将ClientIDMode ="Static" 添加到标记中的控件中，如下所示：

<asp:CheckBox ID="CB_Agree"  ClientIDMode ="Static"
   Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

Tim 刚刚让我意识到您的样式也有问题。为此，您需要像这样添加CssClass="your_class your_other_class"：

<asp:CheckBox ID="CB_Agree"  ClientIDMode ="Static" CssClass="terms checkbox"
   Text="I agree to the terms and conditions" runat="server" TabIndex="4" />

【讨论】：

【解决方案3】：

Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)

如果你使用ASP.NET 4.0，那么你可以在控件上使用ClientIDMode，值为static，ID不会改变。

否则，您可以使用文字来输出元素本身或仅输出其值。在您的页面上，您将拥有：

<input type="hidden" id="ppID" value='<asp:Literal ID="ppIDValue" runat="server" />' />

要将 css 类应用于您的控件，请使用服务器端控件的 CssClass 属性：

 <asp:CheckBox ID="CB_Agree" 
       Text="I agree to the terms and conditions" runat="server" TabIndex="4"
       CssClass="terms checkbox"   />

参考：ASP.NET HtmlInputHidden control - stop name from changing?

【讨论】：