Change Label text in gridview on checking checkbox - asp.net

Question

I am using this Gridview which have checkboxes and labels in it.Now I want when i click the checkbox the text of label must change.
<asp:GridView ID="grdData" runat="server" style="Text-align:center;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="changeTextValue(this)"/>
</ItemTemplate>
<HeaderTemplate>
<%--<asp:CheckBox ID="CheckBox2" runat="server" OnClick="CheckAllEmp(this)"/>--%>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Status_Header" runat="server" Text="Status" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text=0 ClientIDMode="Static"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Answer 1

First Question
Because the label rendered on html will be：
<span id="grdData_ctl02_Label1" ClientIDMode="Static">1</span>
So,you should use "span[id*='Label1']" to find it out：
function changeTextValue(chk) {
var currentTextID = $(chk).parents("tr").find("span[id*='Label1']");
if (chk.checked == true) {
currentTextID.html(1);
}
else {
currentTextID.html(0);
}
}
Second Question
Gridview
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="changeTextValue(this)" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" OnClick="CheckAllEmp(this)" />
</HeaderTemplate>
</asp:TemplateField>
Javascript
function CheckAllEmp(chk) {
var currentTextID = $(chk).parents("table").find("span[id*='Label1']");
var childCheckBoxID = $(chk).parents("table").find("input[id*='CheckBox1']");
if (chk.checked == true) {
currentTextID.html(1);
childCheckBoxID.prop("checked", true);
}
else {
currentTextID.html(0);
childCheckBoxID.prop("checked", false);
}
}

Answer 2

For what reason do you use ClientIDMode="Static"?
You have to create function CheckAllEmp(this) event in your_program_file.cs.
Code in that function would be smth like that:
CheckAllEmp(...){
Label1.Text="Something new";
}

Answer 3

When you want this kind of operations on GridView, it is always good to check the html source of your page. In this scenario, for example, you will have the following html code for your gridview:
<table cellspacing="0" rules="all" border="1" id="grdData" style="border-collapse:collapse;text-align: center;">
<tr>
<th scope="col"></th>
<th scope="col">
<span id="grdData_Status_Header">Status</span>
</th>
</tr>
<tr>
<td>
<input id="grdData_CheckBox1_0" type="checkbox" name="grdData$ctl02$CheckBox1" onclick="changeTextValue(this);" />
</td>
<td>
<span id="Label1">Unique Perspective</span>
</td>
</tr>
<tr>
<td>
<input id="grdData_CheckBox1_1" type="checkbox" name="grdData$ctl03$CheckBox1" onclick="changeTextValue(this);" />
</td>
<td>
<span id="Label1">Challenging</span>
</td>
</tr>
</table>
As you may see, checkbox and label controls are in adjacent table cells. You can use .parent().next() to access the cell containing the label control. Also, you may see that label was rendered as span. To get the label control, therefore, you can use: .parent().next().find('span'). One final note is that you can use .text property of a span to change its contents. See the whole script below:
function changeTextValue(chk) {
var currentTextID = $(chk).parent().next().find('span');
if (chk.checked == true)
currentTextID.text('1');
else currentTextID.text('0');
}