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>

asp.net jQuery可以选择1个日期,但不能选择全部

您可以通过编程方式触发变更事件。

$(".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();
});