asp.net jQuery可以选择1个日期,但不能选择全部
本文关键字:选择 日期 但不能 全部 1个 asp jQuery net | 更新日期: 2023-09-27 18:10:42
在一个项目中,我检查了一些我想要报告日期的日期,当我单独选择日期时,我让它工作。但是我想要一个复选框来选择同一个月内的所有项目,这样如果我想要报告整个月,我就不必选择很多日期。
现在的情况是,当我选中了这个复选框它会选中其他的复选框,但是当它选中其他的复选框时它不会像我自己选中它们一样。
当我单独选择日期时,我有一个Html.Hidden
字段,其中填充了我检查的日期。但是使用Select All复选框不会填充字段。它只是检查复选框。
这是我的脚本
//Select seperate date
$(document).ready(function() {
$('input[name="isoDate"]').change(function() {
$("#date").val("");
$('input[name="isoDate"]').each(function() {
if (this.checked) {
$("#date").val($("#date").val() + " " + $(this).val());
}
});
});
});
//Select all dates inside the month
$(function () {
$(".selectAll").on("click", function () {
if ($(this).is(':checked')) {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', true);
} else {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', false);
}
});
});
这是视图
<form class="form-horizontal">
<div class="portlet-body form">
<div class="form-group">
@if (ViewBag.MissingDays != null)
{
int i = 0;
var months = ((List<DateTime>)ViewBag.MissingDays).GroupBy(x => x.Month);
IEnumerable<IGrouping<int, DateTime>> groups = months as IList<IGrouping<int, DateTime>> ?? months.ToList();
foreach (var group in groups)
{
i++;
var month = CultureInfo.CreateSpecificCulture("sv-SE").DateTimeFormat.GetMonthName(group.Key);
if (groups.Count() > 1)
{
<div class="panel-group accordion" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_@i">
@month
</a>
<input type="checkbox" class="selectAll" name="all" />
</h4>
</div>
<div id="collapse_@i" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-md-12">
@foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" class="selectedId" name="isoDate" value="@isoDate"/>@day-@isoDate
</label>
}
</div>
</div>
</div>
</div>
</div>
}
else
{
<div class="col-md-12">
@foreach (var date in group)
{
var isoDate = date.ToString("yyMMdd");
var day = date.ToString("ddd", new CultureInfo("sv-SE")).Substring(0, 2);
<label style="padding-left: 10px">
<input type="checkbox" id="isoDate" name="isoDate" value="@isoDate" />@day-@isoDate
</label>
}
</div>
}
}
}
</div>
</div>
您可以通过编程方式触发变更事件。
$(".selectAll").on("click", function () {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', this.checked);
//Trigger the change event
$('input[name="isoDate"]').trigger('change')
});
然而,我建议如下:你可以定义一个函数,可以从select-all
复选框事件处理程序调用。
//Define function
var myFunction = function() {
var arr = $('input[name="isoDate"]:checked').map(function() {
return $(this).val();
});
$("#date").val(arr.join(" "));
};
//Bind change event
$('input[name="isoDate"]').change(myFunction);
//Bind selectAll change
$(".selectAll").on("change", function () {
$(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', this.checked);
//Call the method
myFunction();
});