我试图在复选框切换时实现“清除所有复选框”。
<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();
的文章,但是我无法在我的函数中检索我的checkboxlist chkSelectDay
的值。
问:当我取消选中chkSelectDay
复选框时,如何清除复选框列表Weekly
?
使用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>
我没有看到“Weekly”复选框。但是,如果要在取消选中其他复选框时清除列表,则可以使用此选项。
<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>
UPDATE
<script type="text/javascript">
$('#<%= ddlExecutionSchedule.ClientID %> input').change(function (e) {
alert($(this).next('label').html());
});
</script>