Question

<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="countryDataBound">
  <HeaderTemplate>        
  </HeaderTemplate>
  <ItemTemplate>
    <div class="accordion">
      <span><h3><%# Eval("key") %>
      <div class="panelCountry">
        <input type="checkbox" runat="server" class="chbSelectAll"/><label>SelectAll</label>
        <asp:CheckBoxList 
           ID="chbListCountries" 
           CssClass="chbList"
           RepeatColumns="4" 
           RepeatDirection="Horizontal" 
           DataTextField ="Name"
           DataValueField = "CountryCode"
           runat="server">
           <asp:ListItem></asp:ListItem>
         </asp:CheckBoxList>
     </div> 
  </div>
  </ItemTemplate>
  <FooterTemplate>
  </FooterTemplate>
</asp:Repeater>

我有一个对话框，其中包含按大陆分组的世界上所有国家/地区的转发器。每个大陆都被一个jquery手风琴分开。在每个手风琴里面都有一个国家的复选框列表，顶部有一个复选框，用作全选。我需要将标签与select all相关联，才能做出响应。我的意思是，如果我点击标签，我需要能够触发复选框以选择所有。我考虑了

<label for="IDHERE">Select all</label>

但我无法弄清楚如何正确定位复选框，以便当我点击特定标签时，它只选中此特定复选框列表中的复选框。

无论如何都要为每个人创建一个ID＆＃34;选择所有＆＃34;复选框与其他七个复选框是唯一的，以便在单击标签时，correclty选择其各自的手风琴中的复选框。作为参考，当点击checbox时，这个javascript运行：

$(document).on('change', '.chbSelectAll', function (e) {
   var selectAllValue = $(this).prop('checked') 
   var panel = $(this).closest('.panelCountry');
   var checkboxes = panel.find('input[type=checkbox]:not(.chbSelectAll)');
   checkboxes.prop('checked',selectAllValue);                             
 });

Visual view of the problem

Answer 1

如果您不需要runat=server标记，则可以使用ItemIndex创建自己的标记for=。

<input type="checkbox" class="chbSelectAll" id="CheckBox_<%# Container.ItemIndex %>" />
<label for="CheckBox_<%# Container.ItemIndex %>">SelectAll</label>

但为什么不使用aspnet CheckBox？那么你无论如何也不会有这个问题。

<asp:CheckBox ID="CheckBox1" runat="server" Text="SelectAll" CssClass="chbSelectAll" />

为转发器内的复选框创建标签

1 个答案: