Question

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

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

最好的办法是什么？

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

Answer 2

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

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

注意使用扩展器。它实际上只允许在任何时间点检查一个“选择”复选框。我认为这不是你想要的，但你应该能够根据自己的需要进行调整。

如何获取listview行的ID或引用我点击了一个复选框？

2 个答案: