How to toggle a gridview templated asp button text using jquery or javascript

Question

I have a gridview where one column is an "Add" / "Remove" asp:button which I would like to toggle the text when clicked with either jquery or javascript. I have not been able to locate a good example for this.

Here is my markup for the template field:

<asp:TemplateField HeaderText="ADD <br /> REMOVE" HeaderStyle-ForeColor="White" > 
    <ItemTemplate >
       <asp:Button id="btnBuy" runat="server" Width="50px" Height="15px" BorderStyle="Solid" Text="ADD" Font-Size="7pt"                                  BackColor="#FFFF80" />
    </ItemTemplate>
    <HeaderStyle Width="7%" />
    <ItemStyle CssClass="sessionItems" VerticalAlign="Middle"  HorizontalAlign="Center" />
</asp:TemplateField>

Here is some jquery but it doesn't work as I expect this is more for a single button:

           $('#btnBuy').click(function()
          {  
            if ($(this).text() == "ADD")
            {
                $(this).text("REMOVE");
            } else {
                $(this).text("ADD");
            }
        })

Please advise how to correctly toggle the gridview button text?

Thank you, Jim

Here is my checkbox and it does not post back:

<asp:TemplateField HeaderText="Select <br /> Files" HeaderStyle-ForeColor="White" > 
                        <ItemTemplate >
                            <asp:CheckBox ID="chkSelectVideo" runat="server" OnClick="checkboxClicked(this)" ToolTip="Select file for download" 
                                Enabled='<%# Eval("SORD_EnableSelectionCheckBox") %>' Checked='<%# Eval("SORD_SelectedForDownloadFlag") %>' />
                        </ItemTemplate>
                        <HeaderStyle Width="6%" />
                        <ItemStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                    </asp:TemplateField>

Answer 1

One thing what you could try is in the OnClientClick event of the button, call a function as shown below

OnClientClick="SomeJSFunction(this)"

In this way you get access to your button control in the JS Function, so now you can modify the text of the button in the function as shown below:

function SomeJSFunction(source) {
    if (source.value === 'Add') {
        source.value = 'Remove';
    } else if (source.value === 'Remove') {
        source.value = 'Add';
    }
}