javascript - 通过 Javascript 在复选框更改时隐藏或显示中继器内的跨度

Question

我有一个 asp 中继器，它由包含学校类(class)名称(键)和这些类(class)的描述(值)的哈希表填充。我想根据是否选中复选框输入来显示/隐藏封装在跨度中的描述。

我通过将 Container.ItemIndex 作为参数传递给我的 JS 方法，成功地传递了当前的中继器迭代编号，希望能够获取中继器集合并仅引用该索引处的跨度 ID。

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

下面是我的aspx代码，请帮助我隐藏/显示用户在JavaScript中选中或取消选中复选框的转发器迭代的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>
```

Answer 1

最后我能够将控件的 ID 动态命名为字符串+当前中继器迭代编号。之前我因使用 runat=server 而受到阻碍。然后，我根据 JavaScript 方法中的检查状态更改了显示属性。这是代码和屏幕 View 。

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

未选中:

已检查: