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

Question

我正在使用这个 Gridview，它在 it.Now 中有复选框和标签我想当我点击复选框时，标签的文本必须改变。

<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

你为什么使用ClientIDMode="Static"？

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

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

Answer 2

第一个问题

因为在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 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>

如您所见，复选框和标签控件位于相邻的 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');
    }

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

Change Label text in gridview on checking checkbox

asp.net

checkbox

gridview