在GridView中檢查複選框

Question

我需要在GridView中統計選中的複選框，但我不知道該怎麼做。也許我可以使用JavaScript並將計數保存在樣式爲「無」的文本框中。我怎樣才能做到這一點？

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 

Answer 2

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 3

一個JavaScript的解決方案：

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

標記：

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

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

它得到的最簡單方法算上沒有任何麻煩和額外的解釋！ :)

Answer 5

這將幫助你

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