Javascript - 如果選中多個複選框，請選中複選框

Question

我想知道是否有人可以用一些javascript幫助我，因爲我對它很不喜歡，不幸的是我已經被授權爲明天編寫一個函數，而且我看起來很失敗。

在我的MVC應用程序中，我有一個View，用戶可以在特定的GroupHeader中選擇多個插座。已經編寫了SelectAll和DeselectAll javascript函數來選擇groupHeader中的所有（或取消選擇）插座，但是我不確定如何在其他函數中使用這些函數。

我需要限制只允許用戶選擇groupHeader的現有功能，並且這應該選擇該組內的所有插座。不幸的是，這部分應用程序會影響其他部分，因此底層功能必須保持不變。

我會非常喜歡的是有JavaScript來做到以下幾點：

如果頁眉複選框被選中，調用全選功能。 如果未選中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"); 
     } 
    } 

，我會很感激，如果有人可以提供一些幫助，或點我在正確的方向。

謝謝！

編輯：

編輯的JavaScript包括以下的建議通過TEJS：

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