单击时更改 asp:CheckBox 的文本答案

【问题标题】：Change the Text of an asp:CheckBox when clicked单击时更改 asp:CheckBox 的文本
【发布时间】：2010-09-30 14:31:27
【问题描述】：

如何在没有回发的情况下更改 CheckBox 的文本？

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

我想在客户端单击复选框时将文本切换为“打开”或“关闭”。

【问题讨论】：

标签： asp.net javascript checkbox

【解决方案1】：

3 个简单的选项

使用 JavaScript 更改文本客户端 - 通过在 .CS 类中注册事件，如下所示：

CheckBox1.Attributes.Add("JavaScipt")

使用带有JQuery 的 HTML 复选框

或者输入一个Ajax Update Panel

Some AJax starter Videos

【讨论】：

第一个选项不起作用。 input[type=checkbox] 没有文本属性。
我的错它确实创建了一个带有“for”属性的标签，我认为该标签已呈现为标签复选框上的更改事件，但我错了

【解决方案2】：

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

称为：

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

仅供参考，更改复选框标签的文本通常是不好的做法，因为它往往会使用户感到困惑。

【讨论】：

这可能是最好的选择。 ASP.NET 控件不提供获取id 属性的简单方法，因此您通常不能只使用$('#someid'). I try to avoid onclick` 属性，但在这种情况下这是最简单的方法。
可以将与 document.getElementById() 一起使用（或 $(#'') 如果使用 JQuery），但是，复选框控件发出的标签没有 ID，但您几乎可以保证它会在复选框之后。

【解决方案3】：

如果你有兴趣使用像 jQuery 这样的框架 javascript，我提出了一个类似的解决方案：

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

【讨论】：