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"