Question

我有一个带有3个选项的CheckboxList。

在我的JavaScript中，我想检查选中了哪些选项。

但是由于检索到的var值为undefined，因此验证未通过。

javascript： 编辑

var schedule = document.getElementById("<%=ddlExecutionSchedule.ClientID%>").value; 
// ^ return as undefined

var schedule2 = document.getElementById("ddlExecutionSchedule").value;
// ^ return as undefined

var scheduleOptions = schedule.getElementsByTagName('input'); 
// ^ error: Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

html：

<div class="form-group" id="divExecutionSchedule">
<label class="control-label col-md-2" id="lblExecutionSchedule">Execution Schedule</label>
<div class="col-md-3">
    <div class="input-group">
        <asp:CheckboxList ID="ddlExecutionSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleExecutionSchedule(this)" >
            <asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
            <asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
            <asp:ListItem Text="Monthly" Value="Monthly"></asp:ListItem>
        </asp:CheckboxList>
    </div>
</div>

c＃：

//if (ddlExecutionSchedule.Text == "Weekly") // <= Commented off to allow catering for multiple checkboxes to be ticked at the same time
    //{
    string selectedDay = item["Days"] != null ? item["Days"].ToString() : string.Empty;

    if (!string.IsNullOrEmpty(selectedDay))
    {
        List<string> day = selectedDay.Replace(";#",";").Split(';').ToList();
        for (int i = 0; i < chkSelectDay.Items.Count; i++)
        {
            if (day.Contains(chkSelectDay.Items[i].Value))
            {
                //Check only if they match! 
                chkSelectDay.Items[i].Selected = true;
            }
        }
    }
//}

我浏览了类似的文章，并尝试了几种方法，包括添加GetElementsByTagName，但点击了Uncaught TypeError。

非常感谢您的帮助。

Answer 1

由于复选框列表的容器没有任何值，因此返回undefined，

您需要遍历CheckBox列表以获取已选中值的值，例如：

编辑：由于您已指定ClientIDMode="Static"，因此不会在运行时更改，因此，您可以直接指定容器的ID

        //var chkBox = document.getElementById('<%= ddlExecutionSchedule.ClientID %>');
        var chkBox = document.getElementById('ddlExecutionSchedule');
        var options = chkBox.getElementsByTagName('input');
        var listOfSpans = chkBox.getElementsByTagName('span'); //change 'span' as per the page structure
        for (var i = 0; i < options.length; i++)
        {
            if(options[i].checked)
            {
                alert(listOfSpans[i].attributes["JSvalue"].value); //change attribute as per the page structure
            }
        }

Answer 2

您可以尝试在JS中的""周围删除双引号，即"<%=ddlExecutionSchedule.ClientID%>"并保留(<%=ddlExecutionSchedule.ClientID%>)吗？

这可能对您有帮助

Answer 3

请从下面的代码中删除ClientIDMode="Static"。

<asp:CheckboxList ID="ddlExecutionSchedule" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleExecutionSchedule(this)" >
    <asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
    <asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
    <asp:ListItem Text="Monthly" Value="Monthly"></asp:ListItem>
</asp:CheckboxList>

或者如果您想继续使用ClientIDMode="Static"，请按照以下步骤编写JS语法。

var schedule = document.getElementById("ddlExecutionSchedule").value;

这可能会对您有所帮助。

GetElementById返回未定义的值

3 个答案: