使用jquery在gridview中只选中一个复选框答案

【问题标题】：check only one checkbox in gridview using jquery使用jquery在gridview中只选中一个复选框
【发布时间】：2011-11-19 17:56:48
【问题描述】：

我有一个网格视图，我在 itemtemplate 中放置了复选框

我只想从 Gridview 中选择一个复选框来选择该特定行，以便我可以使用该 ID 来编辑或删除该行

aspx页面代码是

            <asp:TemplateField Visible="false">
                <ItemTemplate>
                    <asp:Label ID="lblId" runat="server" Text='<%#Eval("id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    Select
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server"/>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    Branch Name
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblBranch_Name" runat="server" Text='<%# Bind("Branch") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    Address
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <HeaderTemplate>
                    City
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>

当我点击每行第一行的复选框时，我希望从所有行中只选择一个复选框

谢谢

【问题讨论】：

标签： c# jquery asp.net

【解决方案1】：

你可以这样做......使用 jquery 选择单个复选框......

ASPX 代码

<table id="GirdViewTable">
<tr>
<td>
<asp:GridView ID="gvLeave" runat="server" AlternatingRowStyle-CssClass="Col2" AutoGenerateColumns="False"
CellSpacing="1" GridLines="None" Height="100%" PageSize="25" Width="100%">
<RowStyle CssClass="Col1" />
<HeaderStyle CssClass="TdTitle" ForeColor="White" />
<Columns>
<asp:BoundField DataField="leaveName" HeaderText="Leave" />
<asp:BoundField DataField="leaveCode" HeaderText="Code" />
<asp:BoundField DataField="days" HeaderText="Days" />
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:CheckBox ID="chkLeave" runat="server" onclick="toggleSelectionGrid(this);" />
<asp:Label ID="lblLeaveID" runat="server" Text='<% #Eval("leaveID") %>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle CssClass="Col2" />
</asp:GridView>
</td>
</tr>
</table>

绑定网格

private void BindLeaveMaster()
{
     DataTable dt = HREmpLeave.GetSearch(null, null, null, null, true, null, null, null, null).Tables[0];
     try
     {
          if (dt.Rows.Count > 0)
          {
               gvLeave.DataSource = dt;
               gvLeave.DataBind();
          }
          else
          {
               gvLeave.DataSource = null;
               gvLeave.DataBind();
          }
     }
     catch (Exception oException)
     {
           oException.Message.ToString();
     }
     finally
     {
          dt = null;
    }
}

页面加载

if (!IsPostBack)
{ 
      BindLeaveMaster();
}

JQuery 脚本

<script type="text/javascript" src="Script/jquery-1.5.1min.js"></script>

<script type="text/javascript" language="javascript">

function toggleSelectionGrid(source) 
{
   var isChecked = source.checked;
   $("#GirdViewTable input[id*='chkLeave']").each(function(index) {
   $(this).attr('checked', false);
});
  source.checked = isChecked;
}

</script>

【讨论】：