Question

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

以下是GridView

＆＃13;

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

＆＃13;

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"＆gt; ID="gridview1"

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

1 个答案: