输入类型=复选框+ DataList内的标签

时间:2013-09-06 05:51:26

标签: html css checkbox

我在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先生指出这一点!!

0 个答案:

没有答案