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

问题描述：

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

下面是在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>

答

这里一个片段，会为你工作。

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

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

相关推荐