为中继器内的复选框创建标签

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 全部。我需要将标签与 select 全部相关联，以便响应。我的意思是，如果我单击标签，我需要能够触发复选框 select 全部。我考虑过

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

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

是否可以为每个 "select all" 复选框创建一个与其他七个复选框不同的 ID，以便在单击标签时正确 select 各自手风琴中的复选框。作为参考，单击复选框时 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" />

为中继器内的复选框创建标签

Creating a Label for a checkbox inside a repeater

c#

asp.net

jquery

webforms

asprepeater