使用 javascript 查找放置在网格视图中的复选框和文本框

此解决方案经过测试，仅使用 JavaScript 即可工作(此解决方案不需要jQuery！

1. C# 部分(Page_Load方法中(

Page_Load我们需要添加一个小技巧：

foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
    }
}

这样，我们就在GridView的每个CheckBox的OnChange事件中添加了 JavaScript 函数调用。特殊之处在于，我们无法通过HTML实现的是，我们正在 JavaScript 函数中传递每个函数的Row Index，这是我们稍后需要的。

2. HTML部分的一些重要注意事项

确保 Checkbox 控件和Textbox控件，但更重要的是，您的 GridView 控件具有静态 id，请使用下面所示的ClientIDMode="Static"：

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

对于GridView控制：

<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

3. 脚本部分

然后在你的 JavaScript 文件/代码中：

function TextboxAutoEnableAndDisable(Row) {
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];
  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) {
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  }
  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;
}

4. 上述实现的一些注意事项

请注意，在
• JavaScript 代码中，在以下行：
  
  var currentGridViewRow = GridView.rows[Row + 1];[Row + 1]对于完成这项工作很重要，不应更改。
• 最后：

以下行：

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

.cells[2]和.cells[0]对您来说可能不同，因此您必须在[]中选择正确的数字。
通常，这将是从0开始计数的GridView的列号。

因此，如果你的CheckBox位于 GridView 的第一列中，则需要.cells[0] 。
如果您的TextBox在GridView的第二列中，那么您需要.cells[1](在我上面的情况下，TextBox在我的GridView的第三列中，因此，我使用了.cells[2] (

onclick JavaScript代替OncheckedChanged事件，后者是CheckBox服务器端事件。

<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />

编辑：

var GridView = document.getElementById('<%=DeptGrid.ClientID %>')

编辑：根据您的要求在评论中

 if (GridView.rows[Row].cell[2].type == "checkbox")
 {
    if (GridView.rows[Row].cell[2].childNodes[0].checked)
    {
       GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here
    }
 }

== "checkbox"(导致错误，GridView.rows[Row].cell[2].type未定义。 我现在运行的代码如下：

    var grid = document.getElementById('<%=grdResults.ClientID%>');
    if (grid.rows.length > 0) {
        for (row = 1; row < grid.rows.length; row++) {
            if (grid.rows[row].cells[0].childNodes[0].checked) {
                // do something here
                alert('function for row ' + row);
            }                                  
        }

你可以像这样定义你的网格：

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

你的Javascript函数将是：

<script language="javascript" type="text/javascript">
     /* Populating same data to all the textboxes inside grid, 
     once change of text for one textbox - by using jquery
     */
     function SetPostingPeriod(obj) {
         var cntNbr = $("#" + obj.id).val();
      // var cntNbr = document.getElementById(obj.id).value;
      // alert(cntNbr);
         //Access Grid element by using name selector
         $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {
             if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }
         });
     }
 </script>

这个Javascript函数被称为文本框的onblur事件。 当同时调用此函数时，它会传递一个参数 它只不过是文本框 ID。

在javascript函数中，通过使用参数，该参数是文本框的 ID，我们正在获得 vaue。

这是代码：

      var cntNbr = $("#" + obj.id).val();

然后对于网格内可用的每个"txtPeriod"控件，我们需要分配 当前"txtPeriod"文本框的值。

循环网格以识别每个可用的"txtPeriod"： 这是代码：

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {
 });

在这个循环中，我们需要将"txtPeriod"(当前/修改(值分配给其他 "txtPeriod"文本框。在分配其良好做法之前，请检查它是空还是 NAN。 这是代码：

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }

这里有非常简单的解决方案

假设你的网格是这样的：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
    Width="389px" EnableViewState="False">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeId">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="FirstName">
            <ItemTemplate>
                <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LastName">
            <ItemTemplate>
                <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>

你的JavaScript在你的网格中查找控件是

   <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnAddToGrid").click(function () {
                var $grid = $('#<%=GridView1.ClientID %>');
                var $row = $grid.find('tr:last').clone().appendTo($grid);
                var employeeId = $row.find("span[id*='lblEmployeeId']").text();
                var firstname =  $row.find("span[id*='lblFirstName']").text();
                var lastname = $row.find("span[id*='lblLastName']").text();
              alert("ID :" + employeeId +"'n" + "Name :" + firstname +" "+ lastname );
            });
        });
    </script>

使用 java 脚本在网格内查找控件：

for (var r = 1; r < grid.rows.length; ++r) {
    var indexValue = 0; //based on browser. //IE8
    var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
    if (typeof (txtPeriod.value) == "undefined")//IE9                      
        indexValue = 1
     var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
     alert(txtPeriod.value);
}

var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input");
var i;
var cnt = 0;
for (i = 0; i < x.length; i++) {
     if(x[i].type== "checkbox" && x[i].checked)
     cnt++;
}
alert("item selected=" + cnt);