如何使用javascript将gridview中的复选框值导入文本框?

时间:2011-10-21 07:02:21

标签: javascript jquery asp.net

我在gridview中有一个像这样的复选框

<asp:GridView ID="GridView1" runat="server" BorderColor="Blue" BorderWidth="1px" CellPadding="4" Font-Size="Small" ForeColor="#333333" GridLines="None" Width="165px">
  <Columns>
     <asp:TemplateField>
        <EditItemTemplate>
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </EditItemTemplate>
     <ItemTemplate>

    <asp:CheckBox ID="CB"  runat="server" />
   </ItemTemplate>
  </asp:TemplateField>
</Columns>

我希望使用javascript将checked文本框的值转换为另一个位于gridview之外的文本框。

1 个答案:

答案 0 :(得分:0)

由于texbox放在EditItemTemplate中,您需要先将gridview切换到编辑模式。因此,现在你无法在复选框点击上获得javascript上的文本框值。

您可以在复选框旁边添加隐藏字段,并将其值绑定到要在复选框单击时在外部文本框中显示的文本。

$(function () {
     $(".cb").click(function () {
          var selectedText = $(this).next("input[type='hidden']").val();
          $("#<%= SelectedValueTextBox.ClientID %>").val(selectedText);
     });
});

Selected:&nbsp<asp:TextBox runat="server" ID="SelectedValueTextBox" />
<br />
<asp:GridView ID="GridView1" runat="server" BorderColor="Blue" BorderWidth="1px"
     CellPadding="4" Font-Size="Small" ForeColor="#333333" GridLines="None" Width="165px">
     <Columns>
          <asp:TemplateField>
               <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
               </EditItemTemplate>
               <ItemTemplate>
                    <asp:CheckBox ID="CB" runat="server" CssClass="cb" />
                    <asp:HiddenField runat="server" Value="<%# Container.DataItem.ToString() %>" />
               </ItemTemplate>
          </asp:TemplateField>
     </Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = Enumerable.Range(1, 10);
        GridView1.DataBind();
    }
}