リピーター内のチェックボックスのラベルを作成する

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アコーディオンで区切られています。各アコーディオンの内側には、国のチェックボックスのリストがあり、上部にはすべてを選択する機能を持つチェックボックスがあります。私は、すべてを選択することに関連するラベルを持っている必要があります。これは私がラベルをクリックすると、チェックボックスをすべて選択するようにする必要があることを意味します。 私はしかし、私はそれだけで、この特定のCheckBoxListのチェックボックスを選択し、特定のラベルをクリックしたときになるように正しくチェックボックスをターゲットにする方法を見つけ出すことはできません

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

を検討しました。

"select all"チェックボックスにIDを作成すると、他の7つのIDと一意であるため、ラベルをクリックすると、それぞれのアコーディオンのチェックボックスが選択されます。 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

あなたはItemIndexを使用して、独自のラベルfor=を作成することができrunat=serverタグを必要としない場合。

<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" />