GetElementById Returns Undefined Value

Question

I have a CheckboxList with 3 options.

In my javascript, I want to check which options are ticked.

But the validation did not go through as the var value retrieved is undefined.

javascript: EDIT

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;
            }
        }
    }
//}

I have went through the similar articles, and have tried several methods, including adding in GetElementsByTagName, but hit Uncaught TypeError.

Any help is greatly appreciated.

Answer 1

It is returning undefined as the container of the checkbox list does not have any value so,

You need to loop through the CheckBox List to get the values of checked ones like:

Edit: As you have specified ClientIDMode="Static" so it wont be changing on runtime so, you can directly specify ID of the container

        //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
            }
        }