checkbox in gridview in c# validation in javascript

If you are using jQuery it can be done easily. Create a function which will take "this" as parameter and on check box "Click" event pass "this" to the function. Then using .prev() method of jQuery you can get the "tr" row of the grid

 var trContainer = $(this).prev("tr")

Once you have the just do (using jQuery find)

//If you have only one text box in the row

 var txtBox = $(trContainer).find("input"); 

//If you have more than one text box

//Add some dummy css class to this textbox eg txtValidateClass

var txtBox = $(trContainer).find(".txtValidateClass");

Now once you have this textbox just check for

if($(txtBox).val().trim() == ""){
      //Show error
}else{
    //Continue
}

Hope this helps you.

Question is old but just in case someone else needs a solution that works only with JavaScript here is how.

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:ShowErrorMessage(" + (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 ShowErrorMessage(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 && rowTextBox.value === '') {
    // Empty textbox therefore show error message.
    return;
  }

  // Optionally hide the error message here.
}

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]).

5. A small addition

The above is a code that works as the question owner have described the problem.

But I think that in this case is also a good idea to hide the error message when the a change has been made to the textbox. This is when the user check the checkbox and the textbox is empty, gets an error message then types something to the textbox and we should hide the error message.

In brief here are the additions for the above note (for simplicity I have removed the other code but you should keep both if you want to keep the entire functionality):

Here is the C# modification:

foreach(GridViewRow row in YourGridViewControlID.Rows)
{
    if (row.RowType == DataControlRowType.DataRow )
    {
      ((TextBox) row.FindControl("YourTextBoxID")).Attributes.Add("onkeyup", "javascript:HideErrorMessage(" + (row.RowIndex ) + ");");
      ((TextBox) row.FindControl("YourTextBoxID")).Attributes.Add("onblur", "javascript:HideErrorMessage(" + (row.RowIndex ) + ");");
    }
}

As can be seen here, he have added the onblur event as well, as this one with the combination of the onkeyup we ensure that the code will be executed for all cases.

Here is the JavaScript modification:

function HideErrorMessage(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 && rowTextBox.value !== '') {
    // Hide the error message here.
  }
}