在选中复选框时更改gridview中的标签文本

Question

我正在使用这个带有复选框和标签的 Gridview。现在我希望当我单击复选框时标签的文本必须更改。

<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

第一个问题

因为在html上渲染的标签会是：

<span id="grdData_ctl02_Label1" ClientIDMode="Static">1</span>

所以，你应该使用“span[id*='Label1']”来找出它：

function changeTextValue(chk) {
    var currentTextID = $(chk).parents("tr").find("span[id*='Label1']");
    if (chk.checked == true) {
        currentTextID.html(1);
    }
    else {
        currentTextID.html(0);
    }
}

第二个问题

网格视图

<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

您使用 ClientIDMode="Static" 的原因是什么？

您必须在 your_program_file.cs 中创建函数 CheckAllEmp(this) 事件。 该函数中的代码将是这样的：

CheckAllEmp(...){
  Label1.Text="Something new";
}

Answer 3

当你想在 GridView 上进行这种操作时，检查页面的 html 源代码总是好的。例如，在这种情况下，您的 gridview 将具有以下 html 代码：

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

如您所见，复选框和标签控件位于相邻的表格单元格中。您可以使用.parent().next() 访问包含标签控件的单元格。此外，您可能会看到标签呈现为跨度。因此，要获得标签控件，您可以使用：.parent().next().find('span')。最后一点是您可以使用跨度的.text 属性来更改其内容。请参阅下面的整个脚本：

    function changeTextValue(chk) {
        var currentTextID = $(chk).parent().next().find('span');
        if (chk.checked == true)
            currentTextID.text('1');
        else currentTextID.text('0');
    }