Count the checked checkboxes in gridview

Question

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

Solution 1

I wrote both client and server side ways of doing this, have a look at them and choose the one which suits you best!

Please note I've used jQuery for the client side logic as it's the more modern way of manipulating the DOM on the client

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 that you may be a VB.NET developer so here is the VB version of the server side code:

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

Solution 2

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

Comments

[El Ronnoco]

Do you need to do this on the server or on the client?

[Justin Wood]

You should really accompany your answer with an explanation of each section.