Clear CheckBox list in function

Question

I am trying to implement a "Clear All Checkboxes" upon a checkbox toggle.

<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:CheckboxList>
        </div>
    </div>
    <label class="control-label col-md-2"></label>
    <div class="col-md-10">
        <div class="alert alert-danger hidden" role="alert" id="executionScheduleError"></div>
    </div>
</div>

<div class="form-group" id="divSelectDay" >
    <label class="control-label col-md-2" id="lblSelectDay">Select Day of Week</label>
    <div class="col-md-3">
        <div class="input-group">
            <asp:CheckBoxList ID="chkSelectDay" CssClass="chkLabel" ClientIDMode="Static" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table"> 
                <asp:ListItem Value="Monday">Mon</asp:ListItem>
                <asp:ListItem Value="Tuesday">Tue</asp:ListItem>
                <asp:ListItem Value="Wednesday">Wed</asp:ListItem>
                <asp:ListItem Value="Thursday">Thu</asp:ListItem>
                <asp:ListItem Value="Friday">Fri</asp:ListItem>
                <asp:ListItem Value="Saturday">Sat</asp:ListItem>
                <asp:ListItem Value="Sunday">Sun</asp:ListItem>
            </asp:CheckBoxList>
        </div>
    </div>
    <label class="control-label col-md-2"></label>
</div>

In the same page, I have a function that shows/hide the checkboxlist whenever Weekly checkbox is checked/unchecked.

It does not clear the checkboxlist. So if it checked again, the previous selection will be displayed (Monday,Tuesday,etc).

function ToggleExecutionSchedule(controlId) {
    var frmControl = document.getElementById(controlId.id);
    var divDay = document.getElementById("divSelectDay");

    var checkbox = frmControl.getElementsByTagName("input");
    var counter = 0;
    for (var i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked)
        {
            if (checkbox[i].value == "Weekly")
                divDay.style.display = 'block';
        }
        else
        {
            if (checkbox[i].value == "Weekly") {
                divDay.style.display = 'none';
                //clear divDay/chkSelectDay checkboxlist <===
            }
        }
    }
}

I saw some articles on using CheckBoxList1.Items.Clear();, but I am unable to retrieve the value of my checkboxlist chkSelectDay inside my function.

Q: How can I clear checkboxlist chkSelectDay when I uncheck the Weekly checkbox?

With WebForms, much of such actions is done on the server side. This is why WebForms is considered 'clumsy'. Nonetheless, I guess you are looking for a client side way of doing this? — Marcel, Feb 25 '19 at 07:09
Yes @Marcel. I would like to do it on client side, just on the form level. My apologies if I am unaware of some stuff, quite new to this. — gymcode, Feb 25 '19 at 07:11

score 2 · Accepted Answer · answered Feb 25 '19 at 07:27

When using WebForms you should embrace the framework, not fight it, as with all frameworks. Here's the typical WebForms approach:

Have an ASP.NET Button on your page like this:

<asp:Button runat="server" OnClick="ClearButtons" Text="ClearButtons"/>

Then, on the server side clear your checkboxes:

protected void ClearButtons(object sender, EventArgs e)
{
    foreach (ListItem item in chkSelectDay.Items)
    {
        item.Selected = false;
    }
}

This causes a postback on button click, with a subsequent client side page reload. To avoid visible page reloads, you may put the relevant div into an UpdatePanel like this:

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div class="form-group" id="divSelectDay">
            <label class="control-label col-md-2" id="lblSelectDay">Select Day of Week</label>
            <div class="col-md-3">
                <div class="input-group">
                    <asp:CheckBoxList ID="chkSelectDay" CssClass="chkLabel" ClientIDMode="Static" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table">
                        <asp:ListItem Value="Monday" Selected="True">Mon</asp:ListItem>
                        <asp:ListItem Value="Tuesday">Tue</asp:ListItem>
                        <asp:ListItem Value="Wednesday">Wed</asp:ListItem>
                        <asp:ListItem Value="Thursday">Thu</asp:ListItem>
                        <asp:ListItem Value="Friday">Fri</asp:ListItem>
                        <asp:ListItem Value="Saturday">Sat</asp:ListItem>
                        <asp:ListItem Value="Sunday">Sun</asp:ListItem>
                    </asp:CheckBoxList>
                </div>
            </div>
            <label class="control-label col-md-2"></label>
            <asp:Button runat="server" OnClick="ClearButtons" Text="ClearButtons"/>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Thank you @Marcel. I will look through your answer. I have also edited my post to add in the `Weekly` button. — gymcode, Feb 25 '19 at 07:44

VDWWD · Answer 2 · 2019-02-25T08:08:18.817

1

I did not see the "Weekly" checkbox. But if you want to clear the list when a different checkbox is unchecked you can use this.

<asp:CheckBox ID="CheckBoxWeekly" runat="server" Text="Weekly" />

<script type="text/javascript">
    $('#<%= CheckBoxWeekly.ClientID %>').change(function (e) {
        if ($(this).prop('checked') === true) return;
        $('#divSelectDay input').each(function (e) {
            $(this).prop('checked', false);
        });
    });
</script>

UPDATE

<script type="text/javascript">
    $('#<%= ddlExecutionSchedule.ClientID %> input').change(function (e) {
        alert($(this).next('label').html());
    });
</script>

edited Feb 25 '19 at 08:08

answered Feb 25 '19 at 07:33

VDWWD

35,079
22
62
79

Thank you @VDWWD. I will look through your answer. I have also edited my post to add in the `Weekly` button. – gymcode Feb 25 '19 at 07:44
is there a way to determine if the value of "checkboxweekly" contains "weekly" or "monthly", or etc? – gymcode Feb 25 '19 at 08:01
1

Is is. See my update. However would in this case a radiobutton not be better since you probably either want Daily or Weekly. Not both. – VDWWD Feb 25 '19 at 08:09
thank you. I will try to add in the check to the first script ! i couldn't use a radiobutton as i require multiple selections. daily+weekly – gymcode Feb 25 '19 at 08:23
will the script above be able to check if it is weekly or monthly? i tried weekly, it is working. but i will be adding in monthly checkboxes too with the dates. but it will clear off dates with the days – gymcode Feb 25 '19 at 10:01
You have to check the label value `$(this).next('label').html()` and then based the rest on that. – VDWWD Feb 25 '19 at 10:10

Clear CheckBox list in function

2 Answers2