javascript - 计算 gridview 中选中的复选框

Question

我需要在我的 gridview 中计算选中的复选框，但我不知道该怎么做。也许我可以使用 JavaScript 并将计数保存在样式为 display none 的文本框中。我该怎么做？

Answer 1

我写了执行此操作的客户端和服务器端方法，看看它们并选择最适合您的方法!

请注意我使用了 jQuery对于客户端逻辑，因为它是在客户端操作 DOM 的更现代的方式

来源:

%>

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

代码隐藏:

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

编辑:

我怀疑您可能是 VB.NET 开发人员，所以这里是服务器端代码的 VB 版本:

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