Question

我有一个项目是你在列表中选择日期，而不是在项目上报告x小时数。它看起来像这样：

但我想要的是，如果我想选择该月下的所有日期，我想在月份名称后添加一个复选框。但我目前还不确定我会怎么做，所以如果能得到一些指导，我会很高兴。

这是打印出所有日期的视图：

<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>
                                </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" id="isoDate" 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>

这是我现在如何选择日期的脚本。

    $(document).ready(function() {
    $('input[name="isoDate"]').change(function() {
        $("#date").val("");
        $('input[name="isoDate"]').each(function() {
            if (this.checked) {

                $("#date").val($("#date").val() + " " + $(this).val());
            }
        });
    });
});

Answer 1

你可以尝试这样..

首先删除id="isoDate"，因为ID应该是唯一的。并在div附近的month字段

附近添加一个复选框

<input type="checkbox" class="selectAll" name="all" />

现在添加一个JQuery点击处理程序

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

见工作FIDDLE

Answer 2

首次为每个输入元素使用不同的id。然后使用js或jquery。有人喜欢这样：

var i = 0;
var ids = "juli_150505_" + i;
i++;

然后你找到你想要的任何复选框元素。通过JS或jQuery。

或者你可以使用class param，然后使用GetElementByClass（）。

 <input type="checkbox" id="isoDate" class="Juli" name="isoDate" value="@isoDate" />

Answer 3

在每个月名称前放置一个复选框，并为其命名，例如'chkAll'

$('input[name="chkAll"]').click(function(){ //if any chkAll is clicked
    if (this.checked) {
        $(this).find("input[type='checkbox']").each(function() { 
           //Loop through
           $(this).prop('checked', true);
        });
    }
else 
 {
        $(this).find("input[type='checkbox']").each(function() {
           $(this).prop('checked', false);
        });
    }
});

选择foreach中的所有项目

3 个答案: