Jquery Kontrollkästchen nicht markiert, wenn alle Unterpunkte in C# MVC markiert sind

Question

Hallo Ich habe diese Schleife hier, die Checkboxen von Websites zu Boden zu Räumen generieren und wenn ich auf den Seiten alle Etagen überprüft werden, aber umgekehrt, wenn ich manuell Überprüfen Sie alle Stockwerke, aber das Kontrollkästchen "Standort" ist nicht aktiviert. Bitte helfen Sie meine Fehler beheben

<div class="form-group "> 
    <ul id="siterecord"> 
    @for (int i = 0; i < Model.SASites.Count; i++) 
    { 
     @*Generate the sites*@ 
     <li> 
     @Html.CheckBoxFor(m => m.SASites[i].IsCheck, new { @class = "parent" }) 
     @Html.LabelFor(m => m.SASites[i].IsCheck, Model.SASites[i].SiteName) 
     @Html.HiddenFor(m => m.SASites[i].SiteId) 
     @Html.HiddenFor(m => m.SASites[i].SiteName) 
     @*Generate the floors for each site*@ 
     @for (int j = 0; j < Model.SASites[i].SAFloors.Count; j++) 
     { 
      <div style="margin-left:50px; clear:both;"> 
      <label>Floor @Model.SASites[i].SAFloors[j].FloorName</label> 
      </div> 
      <br /> 
      <div style="margin-left:20px;"> 
      <ul class="suiterecord"> 
       @for (int k = 0; k < Model.SASites[i].SAFloors[j].SARooms.Count; k++) 
       { 
       <li style="float:left;"> 
        @Html.CheckBoxFor(m => m.SASites[i].SAFloors[j].SARooms[k].IsCheck, new { @class = "child chkboxCss" }) 
        <div class="ARSLabel"> 
        @Html.LabelFor(m => m.SASites[i].SAFloors[j].SARooms[k].IsCheck, Model.SASites[i].SAFloors[j].SARooms[k].RoomName) 
        @Html.HiddenFor(m => m.SASites[i].SAFloors[j].SARooms[k].RoomId) 
        @Html.HiddenFor(m => m.SASites[i].SAFloors[j].SARooms[k].RoomName) 
        </div> 
       </li> 
       if ((k + 1) % 5 == 0) 
       { 
        @Html.Raw("</ul><div style='clear:both'></div><br><ul class='suiterecord'>"); 
       } 
       } 
      </ul> 
      <div style='clear:both'></div><br> 
      </div> 
     } 
     </li> 
    } 
    </ul> 
</div> 

JQuery Skript

<script> 
$('.parent').click(function() { 
    var isChecked = $(this).is(':checked'); 
    var children = $(this).closest('li').find('.child'); 
    $.each(children, function (index, item) { 
     $(this).prop('checked', isChecked); 
    }); 
}); 

$('.child').click(function() { 
    var parent = $(this).closest('li').find('.parent'); 
    var isChecked = $(this).is(':checked'); 
    if (!isChecked) { 
     // the parent must be unchecked 
     parent.prop('checked', false); 
    } else { 
     // check if all siblings have the same checked status 
     var siblings = $(this).siblings('.child'); 
     var total = siblings.length; 
     var matches = siblings.filter(function() { 
      return $(this).prop('checked') == isChecked; 
     }).length; 
     if (matches === total) { 
      parent.prop('checked', isChecked); 
     } 
    } 
}) 

jetzt Mein Code mit Überprüfung der Eltern fein arbeitet das ganze Kind Artikel überprüft wird. aber es funktioniert nicht umgekehrt, wobei alle Kind überprüfen die Eltern nicht aktiviert ist

Ausgang enter image description here

Answer 1

versuchen, diese einfache Funktion

$('.child').click(function() { 
    var parent = $(this).closest('li');//get the parent 
    var all = parent.find('.child').length;//get all childs 
    var allChecked = parent.find('.child:checked').length;//get all checked 
    parent.find('.parent').prop('checked', false);//uncheck 
    if(all == allChecked) { 
    parent.find('.parent').prop('checked', true);//check if all are checked 
    } 
}) 

Answer 2

Sie können einfach alle Kontrollkästchen auswählen und verwenden .prop('checked', false) um sie zu deaktivieren. Zum Beispiel:

$(document).ready(function(){ 
    $(document).on('click', 'input#all', function(){ 
    var isChecked = $('input#all:checked').length > 0 ? true : false; 
    $('.rooms').find('.rcb').prop('checked', isChecked); 
    }) 
}) 

Hier ist eine Arbeits Geige demonstriert sowohl checking und unchecking: es ist

https://jsfiddle.net/94d0f6m0/1/

Auch eine gute Idee .on statt direkt .click wenn Sie zu verwenden mit Generieren Sie die Kontrollkästchen, nachdem das DOM geladen wurde, um sicherzustellen, dass Ihr Code auch nach Checkbox-Elementen sucht, die dynamisch zum DOM hinzugefügt werden r es wurde geladen.

Answer 3

Wie ich verstanden habe, möchten Sie alle Kinder überprüfen, wenn die Eltern überprüft wird, und überprüfen Sie die Eltern, wenn alle Kinder überprüft werden.

Vielleicht Geige, entwickelte ich Ihnen helfen kann:

https://jsfiddle.net/xcbq4nb1/2/

Was es tut, ist das übergeordnete, wenn alle Kinder ausgewählt werden, zu überprüfen, aber nicht umgekehrt (dh, wenn alle Kinder abgewählt werden, die Eltern ist immer noch ausgewählt, dies ist absichtlich getan, aber Sie können es zwicken, da es von dem Kontext abhängt, mit dem Sie arbeiten). Wenn Sie das übergeordnete Element aktivieren/deaktivieren, aktivieren bzw. deaktivieren Sie alle untergeordneten Elemente (dies ist auch änderbar).

Der Code ist der folgende :)

$(document).ready(function() { 
    $(".parent > div >input").click(function() { 
    $(this).closest(".parent").find(".children input[type=checkbox]").prop("checked",$(this).is(":checked")); 
    }); 

    $(".children li > input").click(function(event) { 
    var parent = $(this).closest(".parent"); 
    var chldContainer = parent.find(".children"); 
    var checkedChildren = chldContainer.find("li input[type=checkbox]:not(:checked)").length; 
    if (checkedChildren == 0 && parent.find("input").is(":not(:checked)")) { 
     $(this).closest(".parent").find("div > input").prop("checked", true); 
    } 
    }); 
}); 

Hoffe, es hilft.