单击 div 切换内部复选框答案

【问题标题】：Click div to toggle inner checkbox单击 div 切换内部复选框
【发布时间】：2018-05-15 00:00:05
【问题描述】：

我有一个 DataList，里面有一个 ItemTemplate，它创建了以下 ui：

sn-p:

    <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" DataKeyField="Key">

            <ItemTemplate>
                <div id="Row">
                    <div id="Cell">
                        <div id="Permission_Label_Div">
                            <asp:Label runat="server" ID="Permission_Label" Text='<%# Eval("Key") %>'></asp:Label>
                        </div>

                        <div id="Permission_CheckBox_Div">
                            <asp:CheckBox runat="server" AutoPostBack="true" ID="Permission_CheckBox" Checked='<%# Eval("Value") %>' />
                        </div>
                    </div>
                </div>
            </ItemTemplate>

        </asp:DataList>

我遇到的问题是允许用户通过单击其各自的 div 来切换复选框。我假设由于 DataList 是一个 asp 服务器控件，我将不得不等待页面完成加载在我可以访问每个 DataList 项目之前。任何帮助将不胜感激。

【问题讨论】：

标签： html asp.net checkbox datalist itemtemplate

【解决方案1】：

这样的东西应该可以工作

$("div#cell").click(function(){
        var checkbox = $(this).find("input[type=checkbox]");
        checkbox.prop('checked', !checkbox.is(':checked'));
    })

【讨论】：

我使用了您的代码并定位了#button_group。一键切换所有复选框。当我定位 #Cell 时，只有第一个“单元格”框会切换。
问题是因为我使用的是带有 ItemTemplate 的 DataList，我不知道如何定位每个项目，因为它们是动态的。
修改 div 选择器以仅定位您需要的 div。 smt 像“div#cell”