如何获取单击复选框的列表视图行的 ID 或引用？答案

【问题标题】：How do I get the ID or reference of the listview row I am clicking a checkbox in?如何获取单击复选框的列表视图行的 ID 或引用？
【发布时间】：2010-04-12 19:13:22
【问题描述】：

我有一个 ASP.NET 2.0 ListView 控件（又名：父）并在此 ListView 中进行了配置，我还有另一个 ListView（又名：子）。对于父级的每一行，都可能有一个子 ListView 控件，它可以有 1-3 行。每行有两个复选框（一个选择复选框和一个拒绝复选框）。

我需要在 JavaScript 中处理这些复选框，以便如果在任何行上选择了一个选择，则所有其他选择复选框都未选中，并且仅该行的拒绝复选框未选中。未选中的行可以选中拒绝复选框。

最好的方法是什么？

【问题讨论】：

+1。最好的方法是学习 javascript。 :D
显然你也需要 :)

标签： javascript listview

【解决方案1】：

我已尽力从您的描述中了解标记的含义，但基本上我构建了多个包含一组复选框输入的 div（忽略糟糕的标记）。

<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>
<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>

从这里开始，我开始使用 jQuery（非常容易使用，但要你自己弄清楚如何设置）。

$('input').change(function(){
    if($(this).attr('checked')) {
        $(this).parent().find('input').attr('checked', false);
        $(this).attr('checked', true);
    }
});

此脚本侦听所有复选框上的更改事件，然后根据包含它的父级运行检查。如果选中此复选框，请取消选中该父级中包含的所有其他复选框。

您可以在 if 语句中更具体地说明这一点，或者为其他特定用例创建 else if 语句。

if( check-box is checked and doesnt have class name ABC ) { 
    //do normal stuff above 
} else if( specific check-box with class name of ABC is checked ) { 
    //do something else 
}

【讨论】：

这看起来正是我所需要的，但它没有触发复选框的单击/更改事件。

【解决方案2】：

我认为您可以使用AjaxControlToolkit 中的MutuallyExclusiveCheckboxExtender 来做您想做的事。这是您所描述内容的粗略实现：

<asp:ListView ID="parentListView" runat="server" ItemPlaceholderID="PlaceHolder1">
    <LayoutTemplate>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <asp:Label ID="lblFieldSet" runat="server" Text='<%# Eval("SetName") %>' />
        <br />
        <asp:ListView ID="childListView" runat="server" DataSource='<%# Eval("Items") %>'
            ItemPlaceholderID="PlaceHolder2">
            <LayoutTemplate>
                <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
                <div>
                    <asp:Label ID="lblItemName" runat="server" Text='<%# Eval("ItemName") %>' />
                    <br />
                    <asp:CheckBox ID="cbSelect" runat="server" Text="Select" />
                    <asp:CheckBox ID="cbDeny" runat="server" Text="Deny" />
                    <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="exclusiveCheckboxExtender" runat="server"
                        TargetControlID="cbSelect" Key="Select" />
                </div>
            </ItemTemplate>
        </asp:ListView>
    </ItemTemplate>
</asp:ListView>

注意扩展器的使用。它实际上只允许在任何时间点选中一个“选择”复选框。我不认为这正是您想要的，但您应该能够对其进行调整以满足您的需求。

【讨论】：