在函数中检索 CheckBoxList 值答案

【问题标题】：Retrieving CheckBoxList Values in Function在函数中检索 CheckBoxList 值
【发布时间】：2019-05-07 16:28:28
【问题描述】：

我的 .ascx 页面中有一个 cblSchedule 复选框列表，允许选择每日/每周：

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

我有一个切换功能，当 Weekly 在 cblSchedule 中被选中/取消选中时显示/隐藏 chkSelectDay：

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

            }
        }
    }
}

当 Weekly 在 cblSchedule 中未选中时，我想添加取消选中 chkSelectDay 中所有复选框的功能。

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

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

谢谢

【问题讨论】：

标签： c# asp.net forms function controls

【解决方案1】：

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

<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
    }
});