Question

我有一系列具有值的复选框。现在我想要做的是当我单击一个按钮时，我想获取已选中复选框的所有值并将其放在我将使用的url字符串上。这是我的一些代码。

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

现在点击。

$('#btnSearch').click(function () {
     var dateFrom = $(".dateFrom").val();
     var dateTo = $(".dateTo").val();

     window.location.href = "home/masterschedule?scheduleType=" + /*here goes the checkboxes*/ + "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;
 });

这是我的接收行动。

[InPrivate]
    public ActionResult MasterSchedule(List<string> scheduleType ,string dateFrom = "", string dateTo = "")
    {
        var appointments = _appointmentRepository.All().ToList();
        var viewModel = new MasterScheduleIndexViewModel();

        if (dateFrom == "" || dateTo == "")
        {
            viewModel.Appointment = appointments;
            viewModel.DocumentPackage = _documentPackageRepository.All().Where(a => a.AMGStatus == DocumentPackageStatus.Approved || a.DocumentPackageStatus == DocumentPackageStatus.Approved).ToList();
            viewModel.AppointmentNotes = _appointmentNoteRepository.All().ToList();
            viewModel.Users = _userRepository.All().ToList();
        }
        else
        {
            var startDate = DateTime.ParseExact(dateFrom, "d/M/yyyy", null);
            var endDate = DateTime.ParseExact(dateTo, "d/M/yyyy", null);

            viewModel.Appointment = appointments.Where(a => DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) >= startDate && DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) <= endDate).ToList();
        }

        return View(viewModel);
    }

我期待来自网址的字符串列表，但如果它是一个数组会更好吗？有任何想法吗？谢谢！

Answer 1

您可以使用serialize，即$(':checkbox[name="scheduleType"]').serialize()

这将负责在查询字符串中发送scheduleType 示例（...?scheduleType=Proposed&scheduleType=RescheduledPending&scheduleType=Cancelled&dateFrom=...）

您可以将List<string> scheduleType保留在动作参数中。

尝试

window.location.href = "home/masterschedule?" +
        $(':checkbox[name="scheduleType"]').serialize() + 
        "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;

<强>更新

根据您要将其反序列化为Enum List的注释，您可以执行以下操作：

在您的复选框中将其转换为(int)，如下所示。

<input type="checkbox" name="scheduleType" value="@((int)AppointmentStatus.NoSchedule)"/>

并在您的操作中将您的操作参数的类型更改为List<AppointmentStatus> scheduleType或更改为List<int> scheduleType（根据您的需要）而不是List<string> scheduleType，您应该很高兴。

Answer 2

给你的复选框一个类，你可以这样做：

html：

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule" class="chk"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

jquery：

$('#btnSearch').click(function () {
     var chkValues  = '';
    $('.chk').each(function(){
        if($(this).prop('checked') == true){
            chkValues += $(this).val();
        }
    });
 });

获取已选中复选框的所有值，并在url字符串上使用它

2 个答案: