Wie überprüften Eltern, wenn alle untergeordneten Kontrollkästchen aktiviert sind

Question

Ich habe eine andere HTML-Struktur zu anderen Fragen, die auf SO ähnlich sind. Ich möchte das Eltern-Kontrollkästchen aktivieren, wenn alle untergeordneten Kontrollkästchen aktiviert sind. Ich habe eine JSFiddle, wo ich meinen ziemlich langen HTML-Code hinzugefügt habe. Was mache ich falsch in der JQuery? Das ist mein jquery:

$('li :checkbox').on('click', function() { 
     var $chk = $(this), 
     $container = $chk.closest('td,li'); 
     if (!$container.hasClass('list-group-item')) { 
     $container.find(':checkbox').not(this).prop('checked', this.checked) 
     } 
     do{ 
     $ul = $container.parent(); 
     $parent = $ul.siblings(':checkbox'); 
     if($chk.is(':checked')){ 
      $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0) 
     } else { 
      $parent.prop('checked', false) 
     } 
     $chk = $parent; 
     $container = $chk.closest('td,li'); 
    } while($ul.is(':not(.someclass)')); 
    }); 

PS: Die Eltern/Kind-Beziehung in der unteren Hälfte der HTML-Struktur nicht gut funktionieren Coz einiger unclosed Tags. Aber die ersten paar Eltern/Kinder arbeiten

Answer 1

Das folgende Beispiel soll Ihnen helfen, zu verstehen und geben Ihnen einen Weg, um zu erreichen, was Sie wollen.

Erklärung

Was sollten Sie tun, eine ID jede Unterkategorie wird geben, die verwendet werden können, durch die Kinder zu durchlaufen, so dass die nur die Kontrollkästchen und nicht alle von ihnen überprüft werden kann.

HTML

<ul> 
    <li> 
    <input type="checkbox" id="test-main"> test 
    </li> 
    <ul id="test-sub-items"> 
    <li> 
     <input type="checkbox"> test 
    </li> 
    <li> 
     <input type="checkbox"> Something 
    </li> 
    <li> 
     <input type="checkbox"> Another Thing</li> 
    </ul> 

    <li> 
    <input type="checkbox"> Blah 
    </li> 
    <li> 
    <input type="checkbox"> blah 
    </li> 
</ul> 

JavaScript

var parent = document.getElementById('test-sub-items'), 
    parentCheckbox = document.getElementById('test-main'); 

parentCheckbox.addEventListener('click', function() { 
    for (var i = 0; i < parent.children.length; i++) { 
    if (parentCheckbox.checked == true) 
     parent.children[i].firstElementChild.checked = true; 
    else 
     parent.children[i].firstElementChild.checked = false; 

    } 
}); 

Dies ist nur ein Beispiel für Sie, um Ihren Code zu versuchen und zu integrieren in.

aktualisieren

Nachdem Sie Ihren Kommentar zu lesen Ich kam schnell mit dieser Funktion auf, die dazu beitragen sollten:

function areAllChecked() 
{ 
    for (var i = 0; i < parent.children.length; i++) { 
    if (parentCheckbox.checked == false) 
     return false; 
    } 
    return true; 
} 

Überprüfen Sie die Konsole im Live-Beispiel für die aktualisierte Version.

Live-Beispiel

JSFiddle

JSFiddle (Update 1)

Lesestoff

children

firstElementChild