Получение значений CheckBoxList в функции

Question

У меня есть cblSchedule контрольный список на моей странице .ascx, который позволяет выбрать Ежедневно / Еженедельно :

<div class="form-group" id="schedule">
    <label class="control-label col-md-2" id="lblSchedule">Schedule</label>
    <div class="col-md-3">
        <div class="input-group">
            <asp:CheckboxList ID="cblSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleSchedule(this)" >
                <asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
                <asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
            </asp:CheckboxList>
        </div>
    </div>
</div>

Есть chkSelectDay checkboxlist отображается при проверке Еженедельно :

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

У меня есть функция переключения, которая отображает / скрывает chkSelectDay когда Еженедельно отмечен / не отмечен в cblSchedule :

function ToggleSchedule(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';

            //UNCHECK ALL chkSelectDay checkboxes <--

            }
        }
    }
}

Я хотел бы добавить функциональность снятия всех флажков в chkSelectDay когда Еженедельно не отмечено в cblSchedule .

Я пытался получить количество флажков через $('#chkSelectDay').

Но я не смог использовать .Count или .Length, поэтому я не могу использовать for-loop для установки .Checked = false.

Спасибо

Answer 1

Первое, что вы должны знать, это то, что по умолчанию CheckBoxList хранит его значение внутри ViewState и не показывает его на стороне клиента.Вам нужно добавить атрибут ClientValue внутри ListItem, чтобы значения списка флажков были доступны на стороне клиента:

<asp:CheckboxList ID="cblSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleSchedule(this)" >
    <asp:ListItem Text="Daily" Value="Daily" ClientValue="Daily"></asp:ListItem>
    <asp:ListItem Text="Weekly" Value="Weekly" ClientValue="Weekly"></asp:ListItem>
</asp:CheckboxList>

Затем обработайте событие change, чтобы убедиться, что значение Weekly передано,в противном случае снимите все флажки chkSelectDay:

$("#cblSchedule input[type=checkbox]").change(function () {
    var value = $(this).parent().attr('clientvalue');

    // check if the value is 'weekly'
    if (this.checked && value != "Weekly") {
        // set all day selection checkboxes to 'unchecked'
        $("[id*=chkSelectDay] input").removeAttr("checked");

        // hide day selection checkboxes
        $('#divSelectDay').css('display', 'none');
    }
    else {
        // do something else
    }
});

Связанные проблемы:

Получите значение Checkboxlist, если не проверено на стороне клиента

Установите и снимите все флажки на основе другого CheckBox

ASP.Net CheckBoxList: установите или снимите все флажки на стороне клиента с помощью jQuery