ASP.Net GridView复选框，单击“更新另一个”复选框

Question

在我的ASP.Net项目中，我有一个带有2个复选框和其他数据列的GridView。 2个复选框就像一个单选按钮，因此当选中1时，必须取消选中其他复选框。 由于需要，我无法将其更改为单选按钮。 如何在客户端实现这种互斥？

下面是GridView

 <asp:GridView ID = "gridview1" runat="server" HorizontalAlign="Left" AutoGenerateColumns="false" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="6" ForeColor="Black" GridLines="Vertical"> <AlternatingRowStyle BackColor = "#CCCCCC" /> < FooterStyle BackColor="#CCCCCC" /> <HeaderStyle BackColor = "Black" Font-Bold="True" ForeColor="White" /> <Columns> <asp:TemplateField HeaderText = "Yes" ItemStyle-HorizontalAlign="Center"> <ItemTemplate> <asp:CheckBox ID = "checkbox1" runat="server"/> </ItemTemplate> <ItemStyle HorizontalAlign = "Center" ></ ItemStyle > </ asp:TemplateField> <asp:TemplateField HeaderText = "No" ItemStyle-HorizontalAlign="Center"> <ItemTemplate> <asp:CheckBox ID = "checkbox2" runat="server" /> </ItemTemplate> <ItemStyle HorizontalAlign = "Center" ></ ItemStyle > </ asp:TemplateField> <asp:TemplateField HeaderText = "Account" ItemStyle-HorizontalAlign="Right" > <ItemTemplate> <asp:Label runat = "server" Text='<%#Eval("Account") %>'></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign = "Right" ></ ItemStyle > </ asp:TemplateField> <asp:TemplateField HeaderText = "REL" ItemStyle-HorizontalAlign="Right"> <ItemTemplate> <asp:Label runat = "server" Text='<%Eval("Relation") %>' ID="RelPosTypeLabel"></asp:Label> </ItemTemplate> <ItemStyle HorizontalAlign = "Right" ></ ItemStyle > </ asp:TemplateField> </Columns> </asp:GridView> 

Answer 1

这是适合您的代码段。

<script type="text/javascript">
    $("#<%= GridView1.ClientID %> tr input:checkbox").change(function () {
        var rowIndex = parseInt(this.id.split("_")[2]);
        switchCheckBoxes(rowIndex + 1);
        this.checked = true;
    });

    function switchCheckBoxes(rowIndex) {
        $("#<%= GridView1.ClientID %> tr").each(function (index, element) {
            if (index == rowIndex) {
                $(this).find("td input:checkbox").each(function () {
                    this.checked = false;
                });
            }
        });
    }
</script>

并删除所有这些多余的空格，将提高可读性ID = "gridview1" > ID="gridview1"