Select one checkbox at a time inside a Gridview using JQUERY

When a Checkbox is used inside a ASP.Net Gridview control then many times we need that on selecting a checkbox only one checkbox should be checked.

For this you can make use of JQuery to loop through all ASP.Net gridview items and uncheck checkboxes. Check this example using ASP.Net gridview control with making use of JQuery.

ASPX CODE

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

Bind Grid

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

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

SQL TABLE

ET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[HREmpLeave](
[leaveID] [int] IDENTITY(1,1) NOT NULL,
[leaveName] [varchar](50) NULL,
[isPaid] [bit] NULL,
[days] [float] NULL,
[isActive] [bit] NULL,
[createdBy] [varchar](50) NULL,
[createdOn] [datetime] NULL,
[modifiedBy] [varchar](50) NULL,
[modifiedOn] [datetime] NULL,
[leaveCode] [varchar](10) NULL,
CONSTRAINT [PK_HRLeave_1] PRIMARY KEY CLUSTERED
(
[leaveID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


SQL Store Procedure

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[gspHREmpLeave_SEARCH]
(
@leaveID int = null,
@leaveName varchar(50) = null,
@isPaid bit = null,
@days float = null,
@isActive bit = null,
@createdBy varchar(50) = null,
@createdOn datetime = null,
@modifiedBy varchar(50) = null,
@modifiedOn datetime = null
)
AS

SELECT
*
FROM
[dbo].[HREmpLeave]
WHERE
(@leaveID IS NULL OR [leaveID] = @leaveID)
AND
(@leaveName IS NULL OR @leaveName = '' OR [leaveName] LIKE @leaveName + '%')
AND
(@isPaid IS NULL OR [isPaid] = @isPaid)
AND
(@days IS NULL OR [days] = @days)
AND
(@isActive IS NULL OR [isActive] = @isActive)
AND
(@createdBy IS NULL OR @createdBy = '' OR [createdBy] LIKE @createdBy + '%')
AND
(@createdOn IS NULL OR [createdOn] = @createdOn)
AND
(@modifiedBy IS NULL OR @modifiedBy = '' OR [modifiedBy] LIKE @modifiedBy + '%')
AND
(@modifiedOn IS NULL OR [modifiedOn] = @modifiedOn)