CheckBoxList - onclick（）JS函数如何检测CheckBox外部的点击（HTML输入）

Question

我正在显示CheckBoxList中任意项目的加载图片。我正在使用javascript onclick方法。

CheckBoxList 控件

<asp:CheckBoxList ID="ckBLBusinessUnits" onclick="loader(this.id);" runat="server" AutoPostBack="True" Visible="false" OnSelectedIndexChanged="ckBLBusinessUnits_SelectedIndexChanged"></asp:CheckBoxList>

我被迫使用JS onclick而不是jQuery事件绑定，因为控件在updatepanel中。初始加载后jQuery函数没有触发。如果我添加一个替代.ie来使用Sys.Application.add_load(loader);，那么首先执行服务器端代码，然后执行JS函数。哪个对我的情况没有帮助。

JS 功能

function loader(controlID) {
    if (controlID == "ckBLBusinessUnits")
    {
        if (($('#ckBLBusinessUnits :checkbox:checked').length) >= 5)
        {
            alert("Maximum 5 BUs can be selected.");
            modal = document.getElementById('loadingImage');
            modal.style.display = "block";
        }
    }
    if (controlID == "selectSegment") {
        modal = document.getElementById('loadingImage');
        modal.style.display = "block";
    }
}

现在的问题是，如果我在复选框外点击一下，则触发JS方法，这意味着将显示加载图像。在同一点上没有发生回发因此无法隐藏图像（在C＃selectSegment_SelectedIndexChanged中）。

如何处理复选框外的点击？

呈现HTML

<table id="ckBLBusinessUnits" onclick="loader(this.id);">
    <tbody><tr>
        <td><input id="ckBLBusinessUnits_0" type="checkbox" name="ckBLBusinessUnits$0" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$0\',\'\')', 0)" value="BU 1"><label for="ckBLBusinessUnits_0">BU 1</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_1" type="checkbox" name="ckBLBusinessUnits$1" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$1\',\'\')', 0)" value="BU 2"><label for="ckBLBusinessUnits_1">BU 2</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_2" type="checkbox" name="ckBLBusinessUnits$2" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$2\',\'\')', 0)" value="BU 3"><label for="ckBLBusinessUnits_2">BU 3</label></td>
    </tr><tr>
        <td><input id="ckBLBusinessUnits_3" type="checkbox" name="ckBLBusinessUnits$3" onclick="javascript:setTimeout('__doPostBack(\'ckBLBusinessUnits$3\',\'\')', 0)" value="BU 4"><label for="ckBLBusinessUnits_3">BU 4</label></td>
    </tr>
</tbody></table>

Answer 1

在Ajax面板刷新后，您可以trigger JavaScript events to fire。

使用引用链接中的一个方法让JQuery将事件绑定或取消绑定到刷新中的任何新元素。您也可以使用它作为触发器解除绑定事件，导致图像加载或覆盖它，以便它调用一个方法来触发回发，如果这是您想要的。

在您的代码中，onclick事件将在复选框的父表上设置：

<table id="ckBLBusinessUnits" onclick="loader(this.id);">

这就是当您在复选框外单击时触发事件的原因。