Count checked checkboxes in gridview

Question

I need to count the checked checkboxes in my gridview, but I don't know how to do this. Perhaps I could use JavaScript and save the score in a text box with a none display style. How can i do this?

Answer 1

I wrote both client and server ways to do this, take a look at them and choose the one that suits you best.

Note: I used jQuery for client-side logic, as this is a more modern way to manipulate the DOM on the client

A source:

%>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> function GetMarriedEmployees() { var counter = 0; $("#<%=gvEmployees.ClientID%> input[id*='chkIsMarried']:checkbox").each(function (index) { if ($(this).is(':checked')) counter++; }); alert(counter); } </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:GridView ID="gvEmployees" AutoGenerateColumns="false" runat="server"> <Columns> <asp:BoundField DataField="EmployeeId" /> <asp:BoundField DataField="EmployeeName" /> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="chkIsMarried" runat="server" Checked='<%# Bind("IsMarried") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:Button ID="btnGetMarried" runat="server" Text="Server" OnClick="btnGetMarried_Click" /><br /> <input type="button" value="Client" onclick="GetMarriedEmployees()" /> </asp:Content> 

Code behind:

 namespace WebApplication1 { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { List<Employees> employees = new List<Employees>() { new Employees{EmployeeId=1, EmployeeName="Bob", IsMarried=true}, new Employees{EmployeeId=2, EmployeeName="John", IsMarried=true} }; gvEmployees.DataSource = employees; gvEmployees.DataBind(); } } protected void btnGetMarried_Click(object sender, EventArgs e) { int marriedEmployees = 0; foreach (GridViewRow row in gvEmployees.Rows) { var isMarried = (CheckBox)row.FindControl("chkIsMarried"); if(isMarried.Checked) marriedEmployees++; } Response.Write(String.Format("Number of married employees = {0}",marriedEmployees.ToString())); } public class Employees { public int EmployeeId { get; set; } public string EmployeeName { get; set; } public bool IsMarried { get; set; } } } 

EDIT:

I suspect you might be a VB.NET developer, so here is the server side server version:

 Public Class _Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim employees As New List(Of Employees) Dim employee1 As Employees = New Employees() employee1.EmployeeId = 1 employee1.EmployeeName = "Bob" employee1.IsMarried = False Dim employee2 As Employees = New Employees() employee2.EmployeeId = 2 employee2.EmployeeName = "John" employee2.IsMarried = True employees.Add(employee1) employees.Add(employee2) gvEmployees.DataSource = employees gvEmployees.DataBind() End If End Sub Protected Sub btnGetMarried_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnGetMarried.Click Dim marriedEmployees As Integer = 0 For Each row As GridViewRow In gvEmployees.Rows Dim isMarried As CheckBox = row.FindControl("chkIsMarried") If isMarried.Checked Then marriedEmployees += 1 End If Next Response.Write(String.Format("Number of married employees = {0}", marriedEmployees)) End Sub End Class Public Class Employees Public Property EmployeeId As Integer Public Property EmployeeName As String Public Property IsMarried As Boolean End Class 

Answer 2

Javascript solution:

 function CheckBoxCount() { var gv = document.getElementById("<%= Gridview1.ClientID %>"); var inputList = gv.getElementsByTagName("input"); var numChecked = 0; for (var i = 0; i < inputList.length; i++) { if (inputList[i].type == "checkbox" && inputList[i].checked) { numChecked = numChecked + 1; } } alert(numChecked); } 

Markup

  <asp:GridView AllowSorting="true" ID="Gridview1" Width="98%" AutoGenerateColumns="False" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:CheckBox ID="cb_count" runat="server" onclick="CheckBoxCount();"></asp:CheckBox> </ItemTemplate> </asp:TemplateField> ... </Columns> </asp:GridView> 

Answer 3

 Dim cnt as Integer = 0 For i=0 to GridView1.Rows.Count -1 Dim chk as CheckBox = TryCast( GridView1.Row(i).Controls.Find("nameOfCheckBoxControlColum"),CheckBox) if chk.Checked=True Then cnt += 1 Next 'Now cnt holds the number of Checked Boxes. 

Answer 4

 var count = $('input[name="numbChecked"]:checked').length; 

This is the easiest way to get an account without any problems and no further explanation! :)

Answer 5

It will help you

 function Calculation() { var grid = document.getElementById("<%=grdSelectFees.ClientID%>"); //grdSelectFees GridViewId for (var i = 0; i < grid.rows.length - 1 ; i++) { var CheckBox1 = $("input[id*=chkRow]")//chkRow Id of Check box if (CheckBox1[i].type == "checkbox" && CheckBox1[i].checked) { //Code For If check Box Is Checked } } }