Javascript - 複数のチェックボックスが選択されている場合、チェックボックスをオンにします。

Question

私は非常に似ていないので、誰かがいくつかのjavascriptを手伝ってくれるのだろうかと不思議に思っていて、残念ながら明日のための関数を書いています。

私のMVCアプリケーションでは、ユーザーが特定のgroupHeader内で複数のアウトレットを選択できるビューがあります。すでに書かれているSelectAllとDeselectAllのjavascript関数は、groupHeader内のすべてのコンセントを選択（またはすべて選択解除）しますが、他の関数でこれらの関数を使用する方法は不明です。

ユーザーがgroupHeaderを選択できるだけの既存の機能を制限する必要があります。これは、そのグループ内のすべてのアウトレットを選択する必要があります。残念ながら、アプリケーションのこの部分は他の部分に影響を与えますので、基本的な機能は同じままでなければなりません。 groupHeaderチェックボックスがチェックされている場合、

のSelectAll関数を呼び出す：私は、理想的のように次の操作を行うために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"); 
     } 
    } 

誰でもいくつかの助けを提供し、または右方向に私を指すことができれば、私は非常に感謝されると思います。

ありがとうございます！

編集：私はこれが私のために働くことを得るように見えることはできませんしかし

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

：

はTejsにより示唆されるように、以下を含むためにJavaScriptを編集します。誰が何がうまくいかないのを見ることができますか？

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 
});