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

您使用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);
    }
}

第二个问题

的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 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()访问包含标签控件的单元格。此外，您可能会看到标签呈现为span。因此，要获得标签控制，您可以使用：.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');
    }

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

3 个答案: