Question

我有一个带文本框的用户控件。文本框的onclick会打开一个popupcontrolExtender，它上面有几个复选框。选中复选框后，它会将复选框值写入文本框。

这是我的java脚本：

<script type = "text/javascript">

    function CheckItem(checkBoxList) {
        var options = checkBoxList.getElementsByTagName('input');
        var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label");
        var s = "";

        for (i = 0; i < options.length; i++) {
            var opt = options[i];
            if (opt.checked) {
                s = s + "," + arrayOfCheckBoxLabels[i].innerText;
            }
        }
        if (s.length > 0) {
            s = s.substring(2, s.length); 
        }
        var TxtBox = document.getElementById("<%=txtCombo.ClientID%>");
    TxtBox.value = s;
    document.getElementById('<%=hidVal.ClientID %>').value = s;
    }

</script>

在上面的js中，这段代码var TxtBox = document.getElementById("<%=txtCombo.ClientID%>");获取文本框并写入它。

当我在我的aspx页面中使用UserControl时，如果我的用户控件只有一个实例，它的工作正常。但是当我添加usercontrol的第二个实例时，文本只写入文本框的第二个实例。如果我在第一个用户控件实例中选中/取消选中第一个复选框，则仍然会将文本添加到替换复选框。

有人可以帮我解决这个问题吗？如何获取复选框的每个内容，以便我可以修改我的java脚本？

修改

添加完整代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiSelectDropDown.ascx.cs" Inherits="MenuTest.MultiSelectDropDown" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<script type = "text/javascript">

    function CheckItem(checkBoxList) {
        var options = checkBoxList.getElementsByTagName('input');
        var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label");
        var s = "";

        for (i = 0; i < options.length; i++) {
            var opt = options[i];
            if (opt.checked) {
                s = s + "," + arrayOfCheckBoxLabels[i].innerText;
            }
        }
        if (s.length > 0) {
            s = s.substring(2, s.length); //sacar la primer 'coma'
        }
        var TxtBox = document.getElementById("<%=txtCombo.ClientID%>");
    TxtBox.value = s;
    document.getElementById('<%=hidVal.ClientID %>').value = s;
    }

</script>


<asp:TextBox ID="txtCombo" runat="server" ReadOnly="true" Width="150" Font-Size="X-Small"></asp:TextBox>
<cc1:PopupControlExtender ID="PopupControlExtender111" runat="server" 
    TargetControlID="txtCombo" PopupControlID="Panel111" Position="Bottom"
     >
</cc1:PopupControlExtender>

<input type="hidden" name="hidVal" id="hidVal" runat="server" />

<asp:Panel ID="Panel111" runat="server" ScrollBars="Vertical" Width="150" Height="110" BackColor="AliceBlue" BorderColor="Gray" BorderWidth="1">

    <asp:CheckBoxList ID="chkList" 
        runat="server" 
        Height="80" onclick="CheckItem(this)">      
        <asp:ListItem Text="Contains" Value="Contains"/>
        <asp:ListItem Text="Related" Value="Related"/>
        <asp:ListItem Text="Exact" Value="Exact"/>
    </asp:CheckBoxList>
</asp:Panel>

Answer 1

每当您拥有UserControl的实例时，您也会重新添加javascript函数。您应该添加一次javascript函数，因此将其从UserControl中删除并将其添加到主.aspx页面中，并将其更改为以下内容：

function CheckItem(chk, txt, hid) {
    var tbl = chk.parentNode.parentNode.parentNode; //table with checkboxes

    var options = tbl.getElementsByTagName('input'); //checkboxes
    var arrItems = new Array(); //array for selected items

    for (i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.checked) {
            arrItems.push(opt.value); //if checked, push it in array
        }
    }

    txt.value = arrItems.join(", "); //use join to comma separate them
    hid.value = arrItems.join(); //comma separated without extra space
}

现在让我们从每个Checkbox调用该函数，而不是从CheckBoxList调用。为此，我们在每次用户点击复选框项而不是整个控件时添加一个属性，我们将其放在后面的代码中：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        foreach (ListItem li in this.chkList.Items)
        {
            li.Attributes.Add("onclick", "CheckItem(this, document.getElementById('" + txtCombo.ClientID + "'), document.getElementById('" + hidVal.ClientID + "'))");
        }
    }
}

最后，从CheckBoxList中删除任何javascript事件，因为我们在后面的代码中执行了此操作：

<asp:CheckBoxList ID="chkList" runat="server" Height="80">
    <asp:ListItem Text="Contains" Value="Contains" />
    <asp:ListItem Text="Related" Value="Related" />
    <asp:ListItem Text="Exact" Value="Exact" />
</asp:CheckBoxList>

Answer 2

另一种方法是使javascript函数名对每个用户控件实例都是唯一的。您可以通过将用户控件客户端ID附加到函数名称来完成此操作。

function CheckItem<%=ClientID %>(checkBoxList) {

确保在调用函数时也包含客户端ID。

Height="80" onclick="CheckItem<%=ClientID %>(this)">

Answer 3

包括你的ASP和完整的JavaScript将有助于我更清楚地了解你的挑战..或者至少了解CheckItem（）调用的来源。

有了这样的话......我对这个提议做出了假设：

你可以修改CheckItem（）的调用者，使其包含txtCombo.ClientID和hidVal.ClientID吗？类似于：

<script type = "text/javascript">

    function CheckItem(checkBoxList, txtClientId, hidClientId) {
        var options = checkBoxList.getElementsByTagName('input');
        var arrayOfCheckBoxLabels = checkBoxList.getElementsByTagName("label");
        var s = "";

        for (i = 0; i < options.length; i++) {
            var opt = options[i];
            if (opt.checked) {
                s = s + "," + arrayOfCheckBoxLabels[i].innerText;
            }
        }
        if (s.length > 0) {
            s = s.substring(2, s.length); //sacar la primer 'coma'
        }
        var TxtBox = document.getElementById(txtClientId);
    TxtBox.value = s;
    document.getElementById(hidClientId).value = s;
    }

</script>

你的电话会是这样的：

CheckItem(checkBoxList, '<%=txtCombo.ClientID%>', '<%=hidVal.ClientID %>');

Answer 4

尝试添加类似jQuery的选择器：$（“input [id * ='man']”）会找到'bigman'和'littleman'

asp.net中的多个usercontrol实例

4 个答案: