Change the Text of an asp:CheckBox when clicked

Question

How can I change the Text for a CheckBox without a postback?

<asp:CheckBox ID="CheckBox1" runat="server" Text="Open" />

I would like to toggle the Text to read "Open" or "Closed" when the CheckBox is clicked on the client.

Answer 1

function changeCheckboxText(checkbox)
{
  if (checkbox.checked)
    checkbox.nextSibling.innerHTML = 'on text';
  else
    checkbox.nextSibling.innerHTML = 'off text';
}

called as:

<asp:CheckBox runat="server" ID="chkTest" onclick="changeCheckboxText(this);" />

Just FYI, it's usually bad practice to change the text of the checkbox label because it tends to confuse the user.

Answer 2

If you're interested to use a framework javascript like jQuery, i propose a solution ilke this:

$("input[id$=CheckBox1]").click(function() {
    if ($(this).attr("checked")) { 
        $(this).next("label:first").text("Open");
    }
    else {
        $(this).next("label:first").text("Close");
    }
});

Answer 3

3 Easy Options

Use JavaScript to change the text client side- By Registering the Event in the .CS class like so:

CheckBox1.Attributes.Add("JavaScipt")

Use an HTML Checkbox with JQuery

Or put in an an Ajax Update Panel

Some AJax starter Videos