Question

我有一个带有以下标记的asp:CheckBox：

<asp:CheckBox ID="cbTest1" runat="server" onchange="cbChange(this.id);"/>

cbChange是<head>中的Javascript函数，看起来像这样（现在很简单）：

<script type="text/javascript">

    function cbChange(senderID) {
        alert('|' + senderID + '|'); // '|' is to help see string length
        return false;
    }

</script>

现在，每当我点击cbTest1时，我都会收到包含以下文字的提示框：

||

换句话说，它是一个空/空字符串。我还应该注意，当我使用更传统的<input>时，我得到了预期的结果：

（<input>的代码）

<input type="checkbox" name="cbtest2" id="cbtest2" onchange="cbChange(this.id);" />

（检查cbtest2时的警告框中的文字）

| cbtest2 |

为什么我会使用asp:Checkbox获取null /空字符串，但使用<input>预期行为？

编辑我做了一些研究，因为asp:CheckBox有ID属性而不是（小写）id，所以我尝试了{{ 1}}。现在我在警告框中得到以下输出：

|未定义|

为什么会发生这种情况？

Answer 1

拉起渲染的页面源，你会看到ASP实际上将其渲染为：

<span onchange="cbChange(this.id);"><input id="ContentArea_cbTest" type="checkbox" name="ctl00$ContentArea$cbTest" /></span>

您的input元素实际上嵌套了span元素。

使用Pure JS，您仍然可以通过以下方式获取input的ID：

<asp:CheckBox ID="cbTest" runat="server" onchange="cbChange(this.childNodes[0].id);"/>

Answer 2

如果您查看来源，您会看到：

<span onchange="cbChange(this.id);">
    <input id="cbTest" type="checkbox" name="cbTest" />
</span>

WebForms的一个缺点 - 标记并不总是如您所愿。

您最好的选择是在客户端上手动连接事件。如果你碰巧使用jQuery，你可以这样做：

jQuery(document).ready(function() {
    jQuery("#<%= cbTest.ClientID %>").click(function() {
        cbChange(jQuery(this).attr("id"));
    });
});

（如果您没有使用jQuery，请执行相同的操作，只需使用常规javascript手动连接到click事件 - 我总是要查找该语法...）

this.id对于asp：CheckBox是空的

2 个答案: