清除函数中的复选框列表

我正在尝试在复选框切换后实施“清除所有复选框”.

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

在同一页面中,我有一个功能,每当选中/取消选中每周复选框时,就会显示/隐藏复选框列表.

它不会清除复选框列表.因此,如果再次选中,将显示先前的选择(星期一,星期二等).

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

我看到了一些有关使用CheckBoxList1.Items.Clear();的文章,但是我无法在函数中检索复选框列表chkSelectDay的值.

问：取消选中每周复选框时,如何清除复选框列表chkSelectDay？

解决方法:

使用WebForms时,您应该像使用所有框架一样接受框架,而不是与之抗争.这是典型的WebForms方法：

在您的页面上有一个ASP.NET按钮,如下所示：

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

然后,在服务器端清除您的复选框：

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

这会导致按钮单击后发回,并随后重新加载客户端页面.为了避免可见的页面重新加载,您可以将相关的div放入UpdatePanel中,如下所示：

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

标签：checkboxlist,webforms,asp-net,c,checkbox
来源： https://codeday.me/bug/20191211/2106096.html