Question

我想知道是否有人可以帮助我使用一些javascript，因为我对它非常不满意，不幸的是，我的任务是为明天编写一个函数，而且我似乎失败了。

在我的MVC应用程序中，我有一个View，用户可以在其中选择特定groupHeader中的多个出口。已经编写的是SelectAll，并且DeselectAll javascript函数用于选择groupHeader中的所有（或取消选择所有）插座，但是我不确定如何在其他函数中使用这些函数。

我需要限制现有的功能，只允许用户选择groupHeader，这应该选择该组中的所有插座。不幸的是，应用程序的这一部分会影响其他部分，因此底层功能必须保持不变。

我最理想的是让javascript执行以下操作：

如果选中groupHeader复选框，则调用selectAll函数。如果未选中groupHeader复选框，请调用deselectAll函数。

由于需要记住的选项（可以从控制器中找到），因此还需要具备以下功能：

在页面加载时，如果在特定部分中选中了所有出口，请选中groupHeader复选框。在页面加载时，如果在特定部分取消选中所有出口，请取消选中groupHeader复选框。

以下是观点：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="/Scripts/FormHelpers.js" type="text/javascript"></script>

    <script type="text/javascript">
        function selectAll(sectionId) {
            toggle(sectionId, "checked");
        }

        function deselectAll(sectionId) {
            toggle(sectionId, null);
        }

        function toggle(sectionId, checked) {
            $('[section$=' + sectionId + ']').each(function () { $(this).attr('checked', checked); });
        }

    </script>
    <div>
        <% int i = 0; %>
        <% Html.BeginForm(); %>
        <% { %>
        <% foreach (App.Web.Models.OutletGroup g in Model.Groups) %>
        <% { %>
        <div style="width:700px;">
            <div style="border-bottom: 1px solid;">
                <div style="font-weight: bold; font-size: larger; width: 300px; float: left;">
                   <input type="checkbox" id="GrpHdr" /> <%: g.GroupHeader%>
                </div>
                <div style="line-height: 18px; vertical-align: middle; width: 250px; float: left;">
                    <a id="select" href="javascript:selectAll(<%: i %>)" <%: ViewData["GROUP_ALL_SELECTED_" + g.GroupHeader] %>>
                        Select All</a> / <a id="deselect" href="javascript:deselectAll(<%: i %>)" <%: ViewData["GROUP_ALL_SELECTED_" + g.GroupHeader] %>>
                            Deselect All</a>
                </div>
                <div style="clear: both;">
                </div>
            </div>
        </div>
        <div style="margin-left: 10px; margin-top: 10px;">
            <% foreach (App.Data.Outlet outlet in g.Outlets) %>
            <% { %>
            <div style="float: left; line-height: 18px; padding: 2px; margin: 2px; vertical-align: middle;
                border: 1px solid grey; width: 282px;">
                <input type="checkbox" section="<%: i %>" name="OUTLET_<%: outlet.OutletID %>" <%: ViewData["OUTLET_" + outlet.OutletID] %>
                    style="vertical-align: middle; padding-left: 5px;" />
                <%= Html.TrimTextToLength(outlet.Name)%>
            </div>
            <% } %>
        </div>
        <div style="clear: both; margin-bottom: 5px;">
            &nbsp;</div>
        <% i++; %>
        <% } %>
        <br />
        <br />
        <div class="buttonFooter">
            <input type="submit" value="Update" />
        </div>
        <div style="clear: both;">
        </div>
        <% } %>
    </div>
</asp:Content>

以下是控制器代码：

public class OutletsController : Controller
    {
        public ActionResult Index()
        {
            // Get all the outets and group them up.
            //
            ModelContainer ctn = new ModelContainer();
            var groups = ctn.Outlets.GroupBy(o => o.Header);

            OutletViewModel model = new OutletViewModel();

            foreach (var group in groups)
            {
                OutletGroup oGroup = new OutletGroup()
                {
                    GroupHeader = group.Key,
                };

                model.Groups.Add(oGroup);
            }

            foreach (var group in model.Groups)
            {
                group.Outlets = ctn.Outlets.Where(o => o.Header == group.GroupHeader).ToList();
            }

            // Get the existing details and check the necessary boxes (only read undeleted mappings).
            //
            var currentOutlets = ctn.UserOutlets.Where(uo => uo.UserID == UserServices.CurrentUserId && !uo.Deleted);

            foreach (var outlet in currentOutlets)
            {
                ViewData["OUTLET_" + outlet.OutletID] = "checked='checked'";
            }

            return View(model);
        }

        [HttpPost]
        public ActionResult Index(FormCollection formValues)
        {
            // Update the existing settings.
            //
            ModelContainer ctn = new ModelContainer();
            var outlets = ctn.UserOutlets.Where(uo => uo.UserID == UserServices.CurrentUserId);

            foreach (var outlet in outlets)
            {
                outlet.Deleted = true;
                outlet.UpdatedDate = DateTime.Now;
                outlet.UpdatedBy = UserServices.CurrentUserId;
            }

            // Save all the selected Outlets.
            //
            foreach (string o in formValues.Keys)
            {
                if (o.StartsWith("OUTLET_"))
                {
                    UserOutlet uo = new UserOutlet();
                    uo.UserID = UserServices.CurrentUserId;
                    uo.OutletID = int.Parse(o.Substring("OUTLET_".Length));
                    uo.CreatedDate = DateTime.Now;
                    uo.CreatedBy = UserServices.CurrentUserId;
                    ctn.UserOutlets.AddObject(uo);
                }
            }

            ctn.SaveChanges();

            return RedirectToAction("Index");
        }
    }

如果有人能提供一些帮助，或者指出我正确的方向，我将非常感激。

谢谢！

编辑：

根据Tejs的建议编辑javascript以包含以下内容：

$('.GrpHdr').each(function()
 {
     var elements = $(this).find('input[name|="OUTLET_"]');


        var checkboxCount = elements.filter(':checked').length;

        if (checkboxCount == elements.length)
            $('.GrpHdr').attr('checked', this.checked);
        else if (checkboxCount == 0)
            $('.GrpHdr').attr('checked', !this.checked);
    });

但是我似乎无法让这个为我工作。任何人都可以看到出了什么问题吗？

Answer 1

首先，您需要更改GrpHdr复选框以使用类或其他内容;目前，看起来你生成多个具有相同Id的复选框，这是永远不会好的。假设您将其更改为类似的类：

  <input type="checkbox" class="GrpHdr" />

然后你可以写这样的东西来检查检查状态：

 $('.GrpHdr').each(function()
 {
     var elements = $(this).find('input[name|="OUTPUT_"]');

     var checkboxCount = elements.filter(':checked').length;

     if(checkboxCount == elements.length)
        // All Checked, Do Some Logic
     else if(checkboxCount == 0)
        // None checked, do some logic
     else
        // Some Checked and some not checked
 });

Javascript - 如果选中多个复选框，则选中复选框

1 个答案: