通过Javascript在复选框更改时隐藏或显示中继器内部的范围

我有一个asp repeater，它是从包含学校班级名称（Key）和班级描述（Value）的哈希表中填充的。我想根据是否选中复选框输入来显示/隐藏封装在范围中的描述

通过将Container.ItemIndex作为参数传递给我的JS方法，我已经成功地传递了当前的repeater迭代次数，希望我能够获得repeater集合，并在该索引处引用跨度的ID

我还尝试将span的ID命名为“string”+Container.ItemIndex，希望通过这种方式获得span，但也没有运气

下面是我的aspx代码，请帮助我隐藏/显示用户在JavaScript中选中或取消选中的repeater迭代的spnMoreInfo范围

```
    <asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>

        <span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <input type="checkbox" runat="server" CssClass="rpContacts" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span runat="server" id="spnMoreInfo" class="text-center;" style="display: none"><%#((DictionaryEntry)Container.DataItem).Value%> </span>

    </ItemTemplate>
</asp:Repeater>
```

```


```

您可以在repeater项中找到感兴趣的

span

，然后使用javascript隐藏/显示它。像这样的

    <asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>
       <div><%--wrap repeater item --%>
        <span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <input type="checkbox" runat="server" CssClass="rpContacts" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span runat="server" id="spnMoreInfo" class="text-center descr"><%#((DictionaryEntry)Container.DataItem).Value%> </span>
      </div>
    </ItemTemplate>
</asp:Repeater>
<script>
   function toggleShow(el){
     var item = el.parentNode.parentNode;//you know where is the item
     if(!el.checked)
        item.querySelector('.descr').style.display = 'none';
     else
        item.querySelector('.descr').style.display = 'inline';//default for span
   }
   window.onload = function(){
     var repeater = document.getElementById('<%#rptClassList.ClientID%>');//or hardcode it
     var chks = repeater.querySelectorAll('[type=checkbox]');
     for(var i = 0, chk; chk = chks[i]; ++i){
       toggleShow(chk);
       chk.addEventListener('click', function(){
           toggleShow(this);
       });
     }//for
   };//window.onload

功能切换显示（el）{
var item=el.parentNode.parentNode；//您知道项目在哪里
如果（！el.选中）
item.querySelector（'.descr'）.style.display='none'；
其他的
item.querySelector（'.descr'）.style.display='inline'；//span的默认值
}
window.onload=函数（）{
var repeater=document.getElementById（“”）；//或对其进行硬编码
var chks=repeater.querySelectorAll（“[type=checkbox]”）；
对于（变量i=0，chk；chk=chks[i]；++i）{
切换显示（chk）；
chk.addEventListener（'click'，function（）{
切换显示（此）；
});
}//为了
};//window.onload

最后，我能够以字符串+当前中继器迭代编号的形式动态命名控件的ID。我之前因为使用runat=server而受阻。然后，我根据JavaScript方法中的选中状态更改了display属性。以下是代码和屏幕视图

<asp:Repeater runat="server" id="rptClassList" >
    <ItemTemplate>

        <br/><span class="text-center;" style="font-size: 24px; font-weight: 200"><%#((DictionaryEntry)Container.DataItem).Key%></span>

        <label class="switch">
            <%--Make the ID of the checkbox = a string plus the current iteration number of the repeater and pass that iteration number in the client side method--%>
            <input type="checkbox" id="chkHideShow<%# (Container).ItemIndex%>" onchange='<%# "return HideShow(" + Container.ItemIndex + ")" %>'>
            <span class="slider round"></span>
        </label><br/>

        <span id="spnMoreInfo<%# (Container).ItemIndex%>" class="text-center" style="display: none"><%#((DictionaryEntry)Container.DataItem).Value%> <br/></span> 

    </ItemTemplate>
</asp:Repeater>

<script type="text/javascript">
    function HideShow(selectedIteration) {

        var checkbox = document.getElementById("chkHideShow" + selectedIteration).checked;
        var span = document.getElementById("spnMoreInfo" + selectedIteration);

        if (checkbox == false) {
            span.style.display = "none";
        } else {
            span.style.display = "inline";
        }

    }
</script>

函数隐藏显示（选择编辑操作）{
var checkbox=document.getElementById（“chkHideShow”+selecteditation）。选中；
var span=document.getElementById（“spnMoreInfo”+selectedition）；
如果（复选框==false）{
span.style.display=“无”；
}否则{
span.style.display=“inline”；
}
}

未选中：

选中：