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

【问题标题】：Creating a Label for a checkbox inside a repeater为中继器内的复选框创建标签
【发布时间】：2017-12-07 15:44:15
【问题描述】：

<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 手风琴分隔。每个手风琴内部都有一个国家复选框列表，顶部有一个复选框，用作全选。我需要将标签与全选相关联，并做出响应。我的意思是，如果我单击标签，我需要能够触发复选框以全选。我考虑过

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

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

是否为每个“全选”复选框创建一个 ID，该 ID 在其他七个复选框中是唯一的，以便在单击标签时正确选择其各自手风琴中的复选框。作为参考，当单击复选框时，此 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

【问题讨论】：

标签： c# jquery asp.net webforms asprepeater

【解决方案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" />

【讨论】：

我将尝试项目索引，我实际上尝试了一个 asp:checkbox。由于某种原因，复选框被拆分为包含复选框和标签的跨度。我不知道如何在此范围内定位 javascript 中的复选框，然后勾选列表中的所有复选框。
itemindex 非常感谢:) 我已将此答案标记为正确！我仍然对为什么 asp 复选框会分解成跨度等感兴趣，但我还有工作要做！感谢您的帮助
这就是 aspnet webforms 创建复选框控件的方式。您可以创建自己的类来覆盖创建控件的默认方式，但这要复杂得多。
“我已将此答案标记为正确！” 对我来说，它看起来并不正确。