我在Datalist中有一个CSS复选框黑客。基本思想是显示数据绑定复选框控件列表。用户将选择一些值,然后使用所选值从数据库中提取更多数据。
问题 - 数据显示正常,但只有第一个复选框可供点击。单击列表中的任何其他元素,仅切换第一个元素。
请帮助!!!
问候。
请参阅HTML代码
<asp:DataList id="lvTopics" RepeatDirection="Vertical" RepeatLayout="Table" RepeatColumns="3" runat="server" DataKeyField="topic_id" >
<ItemTemplate > <table><tr><td>
<asp:HiddenField ID="hdseltopic" runat="server" Value='<%#Eval("istopicSelected","{0}") %>'/>
<div class="names"><span><%#Eval("topic_name","{0}") %></span>
<input id='<%#Eval("topic_id","{0}") %>' class="css-checkbox1" type="checkbox" name="topicgroup" />
<label for='<%#Eval("topic_id","{0}") %>' class="css-label1" />
</div></td></tr></table>
</ItemTemplate>
</asp:DataList>
应用的css类如下:
input[type=checkbox].css-checkbox1 + label.css-label1 {
padding-left:20px;
height:20px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 13px 2px;
font-size:15px;
vertical-align:middle;
cursor:pointer;
font-family:'Open Sans', sans-serif;
margin-left:70px;
width:20px;
margin-top:7px;
}
input[type=checkbox].css-checkbox1:checked + label.css-label1 {
background-position: 13px -18px;
}
.css-label1{
background-image:url(../images/checkbtn.png);
}
很抱歉!!,我发布了错误的HTML代码,编辑了上面的代码。 感谢Alien先生指出这一点!!