清除函数中的复选框列表

Question

我正在尝试在复选框切换时实现“清除所有复选框”。

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

在同一页面中，我有一个功能可以在选中/取消选中 Weekly 复选框时显示/隐藏复选框列表。

它不会清除复选框列表。因此，如果再次检查，将显示之前的选择（星期一、星期二等）。

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 的值。

---

问：当我取消选中Weekly 复选框时，如何清除复选框列表chkSelectDay？

Answer 1

当使用 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>

Answer 2

我没有看到“每周”复选框。但是，如果您想在未选中其他复选框时清除列表，则可以使用它。

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

更新

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