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"