在函数中检索 CheckBoxList 值

Question

我的 .ascx 页面中有一个 cblSchedule checkboxlist，允许选择 Daily/Weekly:

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

选中Weekly时显示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>

我有一个切换功能 display/hide chkSelectDay when Weekly is checked/unchecked in 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 中添加取消选中所有复选框的功能，而 Weekly 在 cblSchedule 中未选中。

我试图通过 $('#chkSelectDay') 检索复选框计数。

但是我无法使用.Count和.Length，所以我无法使用for-loop来设置.Checked = false。

谢谢

Answer 1

您应该知道的第一件事是默认情况下 CheckBoxList 将其值存储在 ViewState 中，而不是在客户端显示。您需要在 ListItem 中添加 ClientValue 属性，以让复选框列表值在客户端可用：

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

Retrieving CheckBoxList Values in Function

c#

forms

asp.net

controls

function