Очистить список CheckBox в функции - PullRequest
Новая
       26

Очистить список CheckBox в функции

0 голосов
/ 25 февраля 2019

Я пытаюсь реализовать «Очистить все флажки» при переключении флажка. 

<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 внутри моей функции.

В: Как очистить список флажков chkSelectDay, если снять флажок Weekly?

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Я не видел флажок «Еженедельно».Но если вы хотите очистить список, когда другой флажок снят, вы можете использовать это. 

<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>
0 голосов
/ 25 февраля 2019

При использовании 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>
...