javascript - asp.net/jQuery 全选仅适用于选项卡内

Question

我正在渲染不同的日期，但我没有报告时间。

如果时间跨度超过 1 个月，它将在右侧选项卡下呈现每个月和日期。如果日期仅在 1 个月内，则只会呈现日期。

但我的问题是，当日期不在选项卡下时，我的“全选”复选框不起作用。

这是我的脚本:

$(function () {
    $(".selectAll").on("click", function () {
        if ($(this).is(':checked')) {
            $(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', this.checked);
            $('input[name="isoDate"]').trigger('change');
        } else {
            $(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', false);
            $('input[name="isoDate"]').trigger('change');
        }
    });
});

这是 View :

@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>
                        </h4>
                    </div>
                    <div id="collapse_@i" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="col-md-12">
                                <label>
                                    <input type="checkbox" class="selectAll" name="all"/>
                                    Välj alla.
                                </label>
                                <br/>
                                @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">
                <label>
                    <input type="checkbox" class="selectAll" name="all" />
                    Välj alla.
                </label>
                @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>
        }
    }
}

Answer 1

假设您仅在日期在 1 个月内时遇到问题，因此不会有任何选项卡。将简单地呈现日期。

请尝试使用以下修改后的脚本:

$(function () {
    $(".selectAll").on("click", function () {
        if ($(this).is(':checked')) {
            if($(this).closest('.panel-default').length > 0)
                $(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', this.checked);
           else
                $("input[name='isoDate']").prop('checked', this.checked);
            $('input[name="isoDate"]').trigger('change');
        } else {
            if($(this).closest('.panel-default').length > 0)
                $(this).closest('.panel-default').find("input[name='isoDate']").prop('checked', false);
            else
                $("input[name='isoDate']").prop('checked', false);
            $('input[name="isoDate"]').trigger('change');
        }
    });
});