asp:CheckBox 的 OnClick 与 OnClientClick？

Question

有谁知道为什么 asp:CheckBox 的客户端 javascript 处理程序需要是 OnClick="" 属性，而不是像 asp:Button 那样的 OnClientClick="" 属性？

例如，这有效：

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

这不起作用（没有错误）：

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

但这有效：

<asp:Button runat="server" OnClientClick="alert('Hi');" />

这不起作用（编译时错误）：（

<asp:Button runat="server" OnClick="alert('hi');" />

我知道 Button.OnClick 的用途；我想知道为什么 CheckBox 不以同样的方式工作...）

Answer 1

这很奇怪。 我检查了 CheckBox 文档页面，内容为

<asp:CheckBox id="CheckBox1" 
     AutoPostBack="True|False"
     Text="Label"
     TextAlign="Right|Left"
     Checked="True|False"
     OnCheckedChanged="OnCheckedChangedMethod"
     runat="server"/>

As you可以看到，没有定义OnClick 或OnClientClick 属性。

记住这一点，我认为这就是正在发生的事情。

当您执行此操作时，

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

ASP.NET 不会修改 OnClick 属性并按原样在浏览器上呈现它。 它将呈现为：

  <input type="checkbox" OnClick="alert(this.checked);" />

显然，浏览器可以理解“OnClick”并发出警报。

在这种情况下

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

，ASP.NET 不会更改 OnClientClick 属性，并将其呈现为

<input type="checkbox" OnClientClick="alert(this.checked);" />

由于浏览器无法理解 OnClientClick，因此什么也不会发生。 它也不会引发任何错误，因为它只是另一个属性。

您可以通过查看呈现的 HTML 来确认上述内容。

是的，这根本不直观。

Answer 2

因为它们是两种不同类型的控件...

您看，您的网络浏览器不了解服务器端编程。 它只知道它自己的 DOM 和它使用的事件模型......以及渲染给它的对象的单击事件。 您应该检查实际从 ASP.Net 发送到浏览器的最终标记，以了解您自己的差异。

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

如有疑问，请始终

<input type="check" OnClick="alert(this.checked);" />

在发送到

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

现在

<input type="check" OnClientClick="alert(this.checked);" />

，据我所知，没有任何浏览器在其 DOM 中支持“OnClientClick”事件...

浏览器时查看输出的来源...您可以看到大量的调试信息。

Answer 3

你说得对，这是不一致的。 发生的情况是 CheckBox 没有服务器端 OnClick 事件，因此您的标记将呈现到浏览器。 http://msdn.microsoft.com/en -us/library/system.web.ui.webcontrols.checkbox_events.aspx

而 Button 确实有 OnClick - 因此 ASP.NET 需要对 OnClick 标记中的事件的引用。

Answer 4

对于那些来这里寻找服务器端OnClick处理程序的人来说，它是OnCheckedChanged

Answer 5

我正在清理警告和消息，发现 VS 确实发出了警告：
验证 (ASP.Net)：属性“OnClick”不是元素“CheckBox”的有效属性。 使用 html 输入控件指定客户端处理程序，然后您将不会获得额外的 span 标记和两个元素。

Answer 6

您可以像这样执行标记：

<asp:CheckBox runat="server" ID="ckRouteNow" Text="Send Now" OnClick="checkchanged(this)" />

被调用的 JavaScript 中的 .checked 属性将是正确的...复选框的当前状态：

  function checkchanged(obj) {
      alert(obj.checked)
  }

Answer 7

Asp.net CheckBox 不支持 OnClientClick 方法。
如果您想向 asp:CheckBox 添加一些 javascript 事件，您必须在服务器代码中的“Pre_Render”或“Page_Load”事件上添加相关属性：

C#：

    private void Page_Load(object sender, EventArgs e)
    {
        SomeCheckBoxId.Attributes["onclick"] = "MyJavaScriptMethod(this);";
    }

注意：确保您没有在页眉中设置 AutoEventWireup="false"。

VB：

    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SomeCheckBoxId.Attributes("onclick") = "MyJavaScriptMethod(this);"
    End Sub

Answer 8

您可以将功能分配给所有复选框，然后在其中要求确认。 如果他们选择“是”，则允许更改复选框，如果选择“否”则保持不变。

就我而言，我还在中继器（或网格）内使用具有 Autopostback="True" 属性的 ASP .Net 复选框，因此在服务器端，我需要将提交的值与数据库中当前的值进行比较，以便了解它们的确认值仅当选择“是”时才选择并更新数据库。

$(document).ready(function () {
    $('input[type=checkbox]').click(function(){                
        var areYouSure = confirm('Are you sure you want make this change?');
        if (areYouSure) {
            $(this).prop('checked', this.checked);
        } else {
            $(this).prop('checked', !this.checked);
        }
    });
}); 


<asp:CheckBox ID="chk" AutoPostBack="true" onCheckedChanged="chk_SelectedIndexChanged" runat="server" Checked='<%#Eval("FinancialAid") %>' />

protected void chk_SelectedIndexChanged(Object sender, EventArgs e)
{
    using (myDataContext db = new myDataDataContext())
    {
        CheckBox chk = (CheckBox)sender;
        RepeaterItem row = (RepeaterItem) chk.NamingContainer;            
        var studentID = ((Label) row.FindControl("lblID")).Text;
        var z = (from b in db.StudentApplicants
        where b.StudentID == studentID
        select b).FirstOrDefault();                
        if(chk != null && chk.Checked != z.FinancialAid){
            z.FinancialAid = chk.Checked;                
            z.ModifiedDate = DateTime.Now;
            db.SubmitChanges();
            BindGrid();
        }
        gvData.DataBind();
    }
}

Answer 9

一种解决方案是使用 JQuery：

$(document).ready(
    function () {
        $('#mycheckboxId').click(function () {
               // here the action or function to call
        });
    }
);