Find checkbox and textbox placed inside gridview using javascript

This solution is tested and works using only JavaScript (no jQuery is required for this solution!).

1. C# Part (In Page_Load Method)

In Page_Load we need to add a small hack:

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

This way, we are adding the JavaScript function call on the OnChange event of every CheckBox of our GridView. What is special and we can't achieve through the HTML is that we are passing the Row Index of each one in the JavaScript function, something that we need later.

2. Some important notes for the HTML Part

Make sure that both Checkbox control and Textbox control but more importantly your GridView Control has static id by using the ClientIDMode="Static" as shown bellow:

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

And for the GridView control:

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

3. Javascript Part

And then in your JavaScript file/code:

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. Some Notes for the above implementation

• Note that in the JavaScript code, at the line:
  var currentGridViewRow = GridView.rows[Row + 1];
  the [Row + 1] is important to make this work and should not change.
• And finally:

The following lines:

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

The .cells[2] and .cells[0] is maybe different for you, so you have to choose the correct number in the [].
Usually, this will be the column number of your GridView starting counting from 0.

So if your CheckBox was in the first column of the GridView then you need .cells[0].
If your TextBox is in the second column of your GridView then you need .cells[1] (in my case above, TextBox was in the third column of my GridView and therefore, I used .cells[2])

I also found that the statement if (GridView.rows[Row].cell[2].type == "checkbox") results in an error, GridView.rows[Row].cell[2].type is undefined. The code I have running now is as follows:

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

You can define your grid like this :

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

And your Javascript Function Would be :

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

This Javascript function is called onblur event of the textbox. When this function is called at the same time it passes a parameter which is nothing but the textbox id.

Inside javascript function by using the parameter which is the id of the textbox we are getting the vaue.

Here is the code :

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

Then For each of the "txtPeriod" controls available inside the grid, we need to assign the value of current "txtPeriod" textbox value to them.

Looping Grid to identify each "txtPeriod" available : Here is the code :

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

 });

Inside this loop we need to assign the "txtPeriod"(current/Modified) value to other "txtPeriod" textboxes.Before assign its good practice to check is it null or NAN. Here is the code :

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

Hi here you are having very easy Solution

Suppose your grid is like this :

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

and your javascript to find controls inside your grid is

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

Find controls inside the grid using java script:

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