我可以唯一标识 2 个复选框，以便我可以为每个复选框添加不同的图像吗？答案

【问题标题】：Can I uniquely identify 2 check boxes so that I can add a different image to each?我可以唯一标识 2 个复选框，以便我可以为每个复选框添加不同的图像吗？
【发布时间】：2015-09-08 05:11:41
【问题描述】：

目前我正在为选中和未选中的复选框使用图像，下面是 html 和 css。

<div class="text-field-box text-field-box-mobile radio-button-box small">

                <asp:CheckBox ID="ChkOffer1"  text="  "  runat="server" class="checkbox checkbox-mobile radio"   Visible="true" EnableViewState="true"></asp:CheckBox>
                <% Response.Write(Session("Offer1"))%>
                </div>

和css

                input[type=checkbox] {
                        display:none;
                }
                 input[type=checkbox] + label
                {
                    background-image: url("checkbox-default.png");
                    background-repeat: no-repeat;
                    height: 25px;
                    width: 25px;

                    padding: 0 0 0 0px;
                    padding-left:30px;
                }

                input[type=checkbox]:checked + label
                {
                    background-image: url("checkbox-checked.png");
                    background-repeat: no-repeat;
                    height: 25px;
                    width: 25px;

                    padding: 0 0 0 0px;
                    padding-left:30px;
                }

我想做的是找到一种方法来唯一标识每个复选框，这样我就可以拥有两个带有两个不同图像的复选框字段。

这些是我尝试添加一个名为radio 的额外类的失败尝试像这样。 input.radio[type=checkbox] 我还尝试将radio 类添加到标签中，例如input[type=checkbox] + label.radio

并尝试使用 ID 进行相同操作，但每次都失败了。有人可以解决我的问题吗？

【问题讨论】：

您对 ID 进行了哪些尝试？我的意思是，这就是要走的路，所以我想知道它在哪里失败了。注意：生成的 HTML 中的 ID 值可能与原始 ASP.NET 源代码不同。
你试过用#ChkOffer1替换input.radio[type=checkbox]吗？
我试过#ChkOffer1 input[type=checkbox]和#ChkOffer1 input.radio[type=checkbox]
我知道这个星期一早上我一定有一些愚蠢的事情。
#ChkOffer1 是单选按钮的 ID，因此您不必（实际上，您不能）写 #ChkOffer1 input 来识别按钮。只需 #ChkOffer1 用于按钮，#ChkOffer1 + label 用于标签。但是，就像我说的，ASP 源中的 ID 值并不总是与输出中的 ID 值相同。检查您生成的 HTML。

标签： html css asp.net checkbox

【解决方案1】：

这是我的意思的一个例子：

（哦，请原谅图片:)）

#field1,#field2{
  display:none;
}

#field1 + label {
  padding:40px;
  padding-left:100px;
  background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center;
  background-size: 80px 80px;
}

#field1:checked + label {  
  background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center;
  background-size: 80px 80px;
}

#field2 + label {
  padding:40px;
  padding-left:100px;
  background:url(http://www.adventureswithwords.com/wp-content/uploads/2014/11/unhappy_face_sticker-p217427116611791537qjcl_400-390x390.jpg) no-repeat left center;
  background-size: 80px 80px;
}

#field2:checked + label {  
  background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXWLioYfp2eZyyJ2g2VQM2YJd_PwFxrB-DDbZx1WwM8wXo20STCcDung) no-repeat left center;
  background-size: 80px 80px;
}

<input type="checkbox" id="field1"/>
<label for="field1">Label</label>

<input type="checkbox" id="field2"/>
<label for="field2">Label</label>

【讨论】：

您不仅回答了我的问题，还为我提供了一种更好地使用复选框字段图像的方法，谢谢！