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

本文关键字：复选框 一个 jquery gridview 使用 | 更新日期: 2023-09-27 18:15:06

我有一个网格视图，我在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>

我想当我点击每一行的第一个复选框时只有一个复选框被选中

谢谢

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

您可以这样做.....使用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;
    }
}

Page_Load 

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>
相关文章：